Sticky header and missing "to the top" arrow

ideenstart · March 2020

Hi !

I've got some questions to this project: https://www.mariannenschule.de

1) I used "blogger 2" as a starting point ... I'm missing the "to the top" arrow in bottom right corner ... How can I enable it ?

2) I want to use a sticky header - but without reducing height by scrolling down. How can I change the CSS, so the scrolling version remains and is transparent - but not resized ?

Thanks
Tom

Pablo · March 2020

Hello Tom,

1) Please go to the Theme Options > Footer, on the bottom of these settings you will find option for it:

https://prnt.sc/rpatcd

2) The only way to avoid that behavior, is to use the "Fixed" type of header.

All other headers will be changing the size.

thanks

ideenstart · March 2020

Hi Pablo !

1) God damn ... how blind can one be ;-)

2) ok got it - but there has to be the possibility to set the values how much the size gets changed ! :-)

Thanks
Tom

Pablo · April 2020

2) Sadly, there is no option like that.

The sticky header decreases it automatically to be short - the max-height value is applied.

Thanks

ideenstart · April 2020

okay ... then the other way...

I'm asking, because in menu I've added "GTranslate.io" plugin dropdown via plugin "shortcodes in menu".

Out of the box this dropdown is stuck to the top of the menu.

Therefore I've added this css with margin-top and padding-left that works fine as you can see when the page loads:

/* GTranslate Button Desktop */

@media only screen and (min-width: 1024px) {

#gtranslate_wrapper {position: relative !important; margin-top: 31px !important; padding-left: 20px !important;}

.switcher .option {position: absolute !important;}

}

But when you scroll down and the menu shrinks the dropdown is too deep because of the reduced height.

Is there any chance to have a different margin-top regarding the menu has full height or is in reduced sticky size ?

Thanks
Tom

Pablo · April 2020

Sorry, but we do not support the third-party plugins, and GTranslate is one of them.

As I said, the menu on sticky will not be bigger, you would have to create a massive amount of code to change that, because you will have to change the position of all of the elements on the menu and extending the height of it.

We help with the CSS code, but only with minor css tweaks.

The only way to make the header not change his size is to use "Fixed" type of header.

Thanks

ideenstart · April 2020

Hi Pablo !

If you just forget that this is in combination with a 3rd party plugin ...

Is it possible to format via CSS for example the font color "blue" in the normal header and "red" in the sticky header ?

Thanks

Tom

Pablo · April 2020

Yes, you have two separate classes, non sticky is #Top_bar, and sticky is #Top_bar.is-sticky

If you don't know how to handle it, just tell me, I'll help you.

Thanks

ideenstart · April 2020

Ah I guess that will bring the solution !

And thanks Pablo - your help is appreciated !

So I need this code for sticky and non-sticky !

/* GTranslate Button Desktop */

@media only screen and (min-width: 1024px) {

#gtranslate_wrapper {position: relative !important; margin-top: 31px !important; padding-left: 20px !important;}

.switcher .option {position: absolute !important;}

}

Thanks
Tom

ideenstart · April 2020

Does that make sense ??? :-D

Do you know a way how to center the object vertically ?
That way we could remove the margin-top !

Thanks

Tom

Pablo · April 2020

As I see, you already created some code for aligning it.

The best way to change it, will be decreasing this code about half, as I done it on screenshot: https://prnt.sc/rtxc4g

Thanks

ideenstart · April 2020

Understood but don't know how to code that !

So what I need now is the #gtranslate twice - once for

#Top_bar.is-sticky

#gtranslate_wrapper {position: relative !important; margin-top: 16px !important; padding-left: 20px !important;}

.switcher .option {position: absolute !important;}

#Top_bar

#gtranslate_wrapper {position: relative !important; margin-top: 31px !important; padding-left: 20px !important;}

.switcher .option {position: absolute !important;}

Thanks
Tom

Pablo · April 2020

Yes, it works fine.

Just insert this code into the Theme Options > Custom CSS & JS > CSS

Thanks

ideenstart · April 2020

WTF :-D

That was just for explanation for you !

Didn't expect this to be the solution !!!
Didn't even try it !

That is funny :-)

Really works fine Pablo !

Thanks for being that helpful !
Tom

Pablo · April 2020

Glad to hear that

If you have some other questions, feel free to ask.

Thanks

Sticky header and missing "to the top" arrow

Comments