Archived topic
sticky header padding
6 replies · Started by Former User on August 8, 2020
My sticky header doesn’t seem to have the same padding as the “regular” header. So, if the browser’s narrower than the container width, the logo and menu are butt up against the sides of the browser window and the header appears wider than the content. Is there setting I”m overlooking or do I have to add custom css to get the same right/left padding as the “regular” header?
Hi there,
The alignment looks correct to me - did you resolve the issue ?
No, sorry, it's a little hard to see on that page, since there's not much content -- you have to squeeze the browser to be narrower than the container AND activate the sticky menu -- note how the logo and nav have no side padding in this screen grab:
https://www.screencast.com/t/uYH0wEXstQpB
Aah ok - probably better to enable Navigation as Header in Customizer > Layout > Header.
Then if need be we can add some padding to both static and sticky navs.
Let me know.
Hmm, but it is nice to have less top/bottom padding on the sticky nav, so seems like keeping the other settings and just adding padding to the sticky nav would be slightly less css. This seems to work -- lmk if you'd handle it differently. Note, I also had to axe the 10px of left margin added to the logo once the browser's narrower than the container width:
body #sticky-navigation .grid-container {
padding: 0 40px;
}
@media (max-width: 1320px) {
#site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
margin-left: 0;
}
}
Oops forgot to use the code thingy ;)
body #sticky-navigation .grid-container {
padding: 0 40px;
}
@media (max-width: 1320px) {
#sticky-navigation .navigation-branding {
margin-left: 0;
}
}Thats a fine method :)
