Archived topic
NAV wrap
3 replies · Started by jonathan on October 8, 2019
Viewing posts 1–4 of 4
Hi,
We have a "block style" NAV which is using navigation as header.
Somewhere around 1100px is bumps to the next line, leaving the log on the first line, and looks terrible. We tried to use % for the width of the NAV blocks, so that maybe they would be responsive to different browser sizes, but it doesn't work.
Was wondering if anyone had any suggestions.
Thanks!
Jon
Hi there,
you can try this with you current setup and CSS:
@media(min-width: 769px) {
/* Stop menu from wrapping */
.main-navigation.has-branding .inside-navigation {
flex-wrap: nowrap !important;
}
/* ensure logo does not shrink */
.navigation-branding {
flex-shrink: 0;
margin-right: unset;
}
/* Force nav to fill space */
.main-navigation:not(.slideout-navigation) .main-nav {
flex: 1;
}
/* Flex Menu items */
.main-navigation ul {
display: flex;
}
/* Menu items fill 20% of space availble */
.main-navigation ul li {
flex: 1 1 20%;
}
/* Reduce menu item padding */
.main-navigation .main-nav ul li a {
padding: 10px;
}
}Wow, above and beyond. Thanks so much for your help David. Works perfectly!
Awesome - glad to be of help
This archived topic is closed to new replies.
