Search code examples
htmlcsswordpressmenusticky

Element in sticky menu getting pushed down on scroll

Hi :) I am a bit intimated to post here but I am at my wit's end.

I am using wordpress and a theme - Cake - for a company website.

I am trying to position a dynamic button to align with the wordpress menu in a sticky wrapper (.menu_wrapper). No matter what i do - float, display, etc - the button is jumping slightly upon scroll. The code is in the right place but I can't assign this button the same class as the wordpress menu items - this is a limitation ( I think). I would prefer to be able to keep this in place with just CSS.

I'm a self-taught, learn as I go, thrown into this person and am doing my best. I know this place is full of actual coders and experts which is why I am reaching out :)

The CSS for the .login_button is 

.login_button {  
    display:inline !important;
    margin-top: 38px !important;
    float: left !important;  
    background:#e73f3a !important;
    color:White !important;
    font-family:roboto !important;
    font-size:22px !important;
    }

You can see this problem at play here: https://netterrain.com - it's the LOG IN button in red.

I really really appreciate any help anyone can offer. Thank you :)

Solution

  • Your issue is that the initial margin-top whose value is 38px should be changed to 13px when you start scrolling.

    You need to add another class to the button when scrolling:

    you can achieve this using javascript:

    // on scroll, 
$(window).on('scroll',function(){

        $('.login_button').addClass('is-scrolling');
});

    And in your css add this:

    .login_button is .login_button .is-scrolling{

    margin-top: 13px !important;
}