Archived topic
Sticky menu not responsive
3 replies · Started by troyw on October 17, 2021
Hey team,
I have a small issue with the Sticky Navigation dropping below the site Logo on smaller browser widths. The Normal navigation responds perfectly, but if i scroll down a bit and the Stick Navigation takes over, it does not behave the same way and instead drops below the Logo.
How can I make it respond the same as the normal navigation?
Thanks
Hi there,
I'm not exactly sure what's the preferred behavior for this but consider adding this CSS:
@media (min-width:769px){
#sticky-navigation .inside-navigation {
flex-wrap: nowrap;
}
.navigation-branding {
flex: 1 1 15%;
}
.sticky-navigation-logo{
width: 90%;
}
.sticky-navigation-logo img, .sticky-navigation-logo picture {
object-fit: contain;
}
}This effectively makes the logo shrink or grow depending on the viewport size. See here - https://share.getcloudapp.com/WnukdbL4
But this is just my suggestion of what I think may look okay as a front-end designer's opinion in trying to fit things in a responsive manner.
Do you have a specific preference you'd like to apply? Perhaps, make the menu item's hamburger breakpoint change on a larger viewport?
Let us know.
That worked beautify Elvin, thanks so much.
No problem. :D
