Archived topic
Can't Configure Nav Elements as Desired
9 replies · Started by Kassim on August 7, 2021
Hello, GeneratePress Team!
I'm trying to arrange my navigation menu so the sandwich menu/Search button are grouped together on the left side and the site logo is on the right side - leaving the middle of the navigation open/blank - here's the site I'm working on: https://staging4tbws.wpengine.com/
I've tried to achieve the desired design with the Customizer but I've been unsuccessful - any insight the team can offer here would be incredibly appreciated.
Thank you!
Hi there,
remove this CSS you have in the Customizer > Additional CSS:
@media (min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
#site-navigation {
margin-left: unset !important;
display: flex;
}
.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}
#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}
}Then let me know and ill provide the requirements for your intended layout.
Hi, David:
Thank you for helping me - I've removed that custom CSS.
Now add this CSS:
.navigation-branding {
order: 10;
margin-left: auto;
margin-right: initial;
}
.main-navigation.has-branding.nav-align-center .menu-bar-items {
margin-left: initial;
}David:
Ah that's perfect - the layout is exactly what I was looking for. The only thing is I just realized the search function doesn't seem to be working. Does it look like I have anything added or toggled that's breaking that?
Thank you!
Doh ... was meant to add this CSS as well:
.navigation-search input[type="search"]{
padding-left: 60px;
}David:
Ah no worries - added that additional CSS and now we're good to go. Thank you so much for all your help!
Glad to hear that!
Hi, David!
Two quick questions about this nav again.
#1: I have the screen size threshold for the sandwich menu set to 2000px because I only want the mobile version of the nav visible. Is there a way to make that px threshold higher? I have test users with screen sizes over 2000px who are seeing the wrong menu.
#2: Also, is there a way I can make these two element have auto margins that fit the entire page? Please see the screen shot below.
Thank you!
Hi there,
#1: I have the screen size threshold for the sandwich menu set to 2000px because I only want the mobile version of the nav visible. Is there a way to make that px threshold higher? I have test users with screen sizes over 2000px who are seeing the wrong menu.
You can type the value manually. The ^ button is limited to 2000px but you can type in 6000px if you want. :D
#2: Also, is there a way I can make these two element have auto margins that fit the entire page? Please see the screen shot below.
Add this CSS:
.inside-navigation.grid-container {
max-width: 100%;
}
