Sticky header and missing "to the top" arrow

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

Comments

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

    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
  • 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

  • 2) Sadly, there is no option like that.
    The sticky header decreases it automatically to be short - the max-height value is applied.
    Thanks
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Yes, it works fine.
    Just insert this code into the Theme Options > Custom CSS & JS > CSS
    Thanks
  • 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
  • Glad to hear that ;)
    If you have some other questions, feel free to ask.
    Thanks
Sign In or Register to comment.