Archived topic
add space to one nav item to fill secondary menu edge to edge
10 replies · Started by sparkle on March 27, 2023
i saw in another thread, a person had luck with what i wanted, but it's not working for me. i tried this code because i want to make a space after the 4th menu item that would pin the other menu items to the right.... so items 1,2,3,4 [flexible space here] 5,6,7,8 with items 1 & 8 being at the outer edges of the secondary menu container.
ul#menu-constants li:nth-child(4) {
margin-right: auto;
}nevermind i found this https://docs.generatepress.com/article/centering-logo-navigation/ which i think i can get working for me.just gotta keep the logo big and the menu margins the same width as the page...
Glad you've figured it out :)
oh wait.... i totally did NOT figure this out. i found the other technote for centering the logo on the primary nav on this site... but neither are working the way i want.... but if you could tell me how to get that gap in the secondary nav, that would be amazing. for the primary nav, i'm having trouble keeping the logo large but getting the other items to be spaced evenly and butting out to the outer edges of the container....
Hi there,
can i see the site in question ?
yes... sorry... :) i had it in the original post...
No probs :)
Add this to your CSS:
.secondary-navigation .inside-navigation,
.secondary-navigation .inside-navigation .main-nav {
max-width: 100%;
flex: 1;
}ok! yay. THANK YOU! i still have a lot to learn about flex.
for the desktop primary nav, i've got the logo centered per the technote above, but i'd like to restrain the logo to always be 30% of the site width and then have the other nav items all 11% width and text centered so it looks a little more like the second image here.
The difficulty here is - it requires a lot wider navigation bar to work, as each menu item has to be the width of the widest menu item.
For example:
1. Remove this part of the CSS:
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}2. Add this CSS:
/* set the width of the nav */
.main-navigation .inside-navigation {
max-width: 1560px;
}
/* define the space the logo requires */
#menu-launch {
--logo-width: 360px;
justify-content: space-around !important;
}
/* insert a pseudo menu item behind the logo */
/* this makes it so items cannot go behind the logo */
#menu-launch:before {
content: '';
order: 2;
flex-basis: var(--logo-width);
margin: auto;
}
#menu-launch li:nth-last-of-type(-n+3) {
order: 10;
}
/* Set the width of each menu item */
#menu-launch li {
flex: 0 1 calc( ( 100% - var(--logo-width) ) / 6 );
text-align: center;
}
You will see i had to set the max-width to 1560px to keep the longest item inline.
If you can reduce menu item widths / font sizes etc. then the max-width can be reduced.
thanks so much for this. i appreciate the explanations and advice too. it looks great. you guys rock. lemme know when the GP tshirts are available for purchase!
You're welcome
