Archived topic
Center logo in nav bar, menu items flex: space-around, mobile too. no hamburger
4 replies · Started by Brad on March 19, 2023
Center logo in nav bar, menu items flex: space-around, mobile too. no hamburger menu
_________
Watched and followed your guys tutorial below.
GeneratePress
https://docs.generatepress.com/article/centering-logo-navigation/
YouTube
https://youtu.be/P9pCPK5DtRk
I'm attempting to just change the menu items to flex: space-around or justify-content: space-around? I don't want the menu items pushed far float left / pushed far float right.
Any ideas? Sincere thanks for your assistance. Url in private section.
Hi Brad,
For clarity, can you provide a bit of a sketch of how you want the menu items to look like?
Sure.. please see screen shot
This is my go to flexbox resource
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content
Remove this code first:
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}Then, try adding this:
.site-header .nav-align-center .main-nav>ul {
justify-content: space-between;
margin-left: 100px;
margin-right: 100px;
}This setup will likely only work on bigger screens though.
Smaller screens will make the logo appear on top of a menu item.
