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

Home Forums Support Split Theme – Menu running from center, instead of sides

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1241762
    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

    #1241960
    Leo
    Staff
    Customer Support

    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 🙂

    #1241972
    Lars

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

    #1241996
    Leo
    Staff
    Customer Support

    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;
    }
    #1242127
    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).

    Not really in the center...

    #1242131
    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?

    #1242237
    David
    Staff
    Customer Support

    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.

    #1242435
    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?

    #1242564
    David
    Staff
    Customer Support

    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.

    #1242594
    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.

    #1242616
    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?

    #1242693
    David
    Staff
    Customer Support

    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…

    #1242932
    Lars

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

    #1243102
    David
    Staff
    Customer Support

    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.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.