[Support request] Split Theme – Menu running from center, instead of sides

[Lars]

Hi!

I have just installed Generatepress and Split-theme/configuration. Now I want to make the menu come out of the logo in the center rather than coming out from the left and right side. I want the menu items to “stick” to the center or float towards the center. That’s a couple of ways trying to explain the same thing. Can I make that happen?

All the best
Lars

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Lars]

Not much to show since I haven’t figured it out. But there you go.

[Leo]

Go to Additional CSS field in the customizer and edit this CSS:

#site-navigation {
    float: none;
    width: 100%;
}

To something like this:

#site-navigation {
    float: none;
    width: 70%;
    margin: auto;
}

[Lars]

Thanks for the help, really appreciated!

It’s nearly there, but I have a feeling we are trying to solve it the wrong way. As you might see in the picture below you’ll notice that the margin is different between the sides. In the best case scenario the two sides should be with the exact same margin on either side (perhaps with a adjustable padding/margin, to make it look as nice as possible).

[Lars]

Another thing that bothers me greatly is that when I adjust the size of the browser window then the menu will sink into the logo. Can we not make it float next to the logo in any simple way?

[David]

Hi there,

without using Javascript which is not a good thing, there isn’t an automatic way to do this. Try this CSS:

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    justify-content: center;
}

.main-navigation .menu-item-separator {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
            flex-grow: 0;
            flex-shrink: 0;
    flex-basis: 200px; /* 20px wider than logo */
}

This will push the menu items into the middle. But the menu will be off center as the menus to the right are not as wide. So we need to add a little margin to the right with this CSS:

.main-navigation li.search-item {
    margin-right: 31px;
}

To calculate the 31px i used the browser developer tools to measure each menu item and then calculate the total width of the left hand-side ( = 327px ) and the right hand-side ( = 296px ). The right hand-side is 31px shorter so we add that back with some margin on the last element.

[Lars]

David, thanks for the help.

I find it to look good as long as the browser stays within proportions… but as soon as I make the window smaller then the menu items start to eat into the logo. Is it really not possible to make it just stay fixed? Or is it that the way the menu is made (with a separator, rather than being split into two menus) that makes it difficult?

[David]

oops missed out a property – update the CSS here

You will probably need to increase the Primary Navs mobile menu breakpoint to stop the menu items sneaking off the page.

[Lars]

David. You are a wizard!

Amazing what CSS can do these days. I hope to learn the witchcraft myself one day. Maybe one day I will be as powerful as you, my master.

[Lars]

Another question for you David:

When I try to add menu items that are two words there seem to be an automatic line break happening. Why is that?

[David]

Awesome 🙂
The Menu Label will break to two lines if there isn’t room to accommodate them both in a single line. So simply put there isn’t enough space.

This happens with the Split Menu as we’re using Flexbox to keep all the items in a centered row. Normally menus would create new lines to place menu items on when they run out of space…

[Lars]

Can I force the menu to not behave like that? I really like to have two words in one menu item.

[David]

The menu items would require more space.
That would mean either increasing the sites container width, reducing the primary navigation font size or the menu items spacing.

[Author]

Posts