[Support request] Center logo in nav bar, menu items flex: space-around, mobile too. no hamburger

[Brad]

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.

[Fernando]

Hi Brad,

For clarity, can you provide a bit of a sketch of how you want the menu items to look like?

[Brad]

Sure.. please see screen shot

https://www.dropbox.com/s/sctqzxqxi2h7rcf/IMG_9132.jpg?dl=0

[Brad]

This is my go to flexbox resource

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content

[Fernando]

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.

[Author]

Posts