Sticky menu css

redmarvanderwoert · January 2017

Goodmorning,

I have a question, I used CSS for my topbar menu and logo, cause I wanted my logo to be bigger.

However it results in wrong padding with the sticky menu when I scroll down, see screenshots. Is there any CSS to adjust this?

http://pasteboard.co/sEdRKZTnp.jpg

http://pasteboard.co/sEegZt3g9.jpg

Greetings,

Redmar

Albert · January 2017

Hi,

if you want to increase logo size, there is no need to use custom css because its size can be changed under Theme options > Global > Logo > Advanced section.

redmarvanderwoert · February 2017

Thank you,

However this doesn't solve the problem with the sticky menu. The positioning then is wrong. How can I solve this?

Greetings,

Redmar

Albert · February 2017

Please send us link to page where you have a problem with sticky header using above. But please increase this logo size so we can check what might be wrong.

redmarvanderwoert · February 2017

http://alphaverhuizingen.nl/

This is the link.

Bryan · February 2017

Replace you custom css with this css:

#Top_bar:not(.is-sticky) #logo, .header-fixed #Top_bar:not(.is-sticky) #logo, .header-plain #Top_bar:not(.is-sticky) #logo, .header-transparent #Top_bar:not(.is-sticky) #logo {
    height: 100px;
    line-height: 60px;
    padding: 10px 0;
}

#Top_bar:not(.is-sticky) .menu > li > a span:not(.description) { padding: 20px 10px !important; }

#Top_bar:not(.is-sticky) .top_bar_right_wrapper {
    top: 40px;
}

As you can see i have added :not(.is-sticky) to every #Top_bar element to not load those style on the sticky header.

redmarvanderwoert · February 2017

You're amazing!

Thank you!

Sticky menu css

Comments