[Resolved] Align Desktop Menu Items left and right

Home Forums Support [Resolved] Align Desktop Menu Items left and right

Home Forums Support Align Desktop Menu Items left and right

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #767237
    Chris

    Hello,

    I am trying to align my desktop menu items both left and right. Here is a screenshot of the current settings:
    2018-12-28_1306

    I would like the “Hot Girls” and “Destinations” menu items to align left – and the other 2 to stay where they are.

    I tried adding – menu-item-float-left – to the individual menu item css class, and then added the following css to simple css:

    .main-navigation li.menu-item-float-left {
    float: left;
    }

    But it did not seem to have any effect.

    The test site is – https://staging-internationallovescout.kinsta.cloud/

    Any idea how to accomplish this?

    Thanks

    #767832
    Leo
    Staff
    Customer Support

    Hi there,

    Try using this method here:
    https://docs.generatepress.com/article/navigation-as-a-header/#basic

    Then add menu-item-float-right to the “Start Here” and “Free Dating Ebook” menu items.

    Might need a bit more CSS tweak but we can take a look after the above is done.

    #768895
    Chris

    That works great – the only problem is that my search Icon is now on the left the 2 Float-Right menu items (see screen shot)
    https://www.screencast.com/t/XDn86zcEyv

    Is there any way to shift it at the far right of the menu again?

    Thanks

    #768906
    Leo
    Staff
    Customer Support

    I see that you are already using some CSS to shift things around.

    Can you remove them so I can see if I can provide a better solution?

    #768919
    Chris

    Yeah – my css is a bit of a mess. I have removed all the stuff that effects the menu so you should have a clean slate. Here is the stuff I removed in case you are interested:

    /* Logo and Hamburger Hack*/

    .main-navigation .navigation-logo {
    margin-left: 80px;
    }


    @media
    (max-width: 1250px){
    .main-navigation .navigation-logo.site-logo {
    margin-left: 80px;
    }
    }

    li.slideout-toggle a { font-size: 26px;
    }

    li.slideout-toggle {
    position: absolute;
    margin-left:30px;
    }
    .inside-navigation {
    position: static;
    }

    .inside-header {
    position: relative;
    }

    .inside-header .site-logo {
    margin-left: 40px;
    }

    .navigation-stick .inside-navigation {
    position: relative;
    }

    .navigation-stick li.slideout-toggle {
    top: 0;
    }

    .main-navigation li.menu-item-float-left {
    float: left;
    }

    .main-navigation li.menu-item-float-right {
    float: right;
    }

    #769300
    Leo
    Staff
    Customer Support

    Can you remove all the menu-item-float-right and menu-item-float-left classes as well so the menu goes back to original order?

    Then add class free to Free Dating Ebook and class start to Start Here.

    After that we can use flexbox to arrange it πŸ™‚

    Thanks!

    #769564
    Chris

    Ok – items removed and added.

    #770024
    Leo
    Staff
    Customer Support

    Hmm I’m not sure if my original thought of using Flexbox would work.

    I’ll ask David and report back πŸ™‚

    #770056
    Leo
    Staff
    Customer Support

    Ok I think I got this. Follow the steps here:

    – Add the logo as the first menu item using a custom link:
    URL: LINK TO YOUR HOME PAGE
    Navigation Label: <img src="http://LOGO-IMAGE-URL" alt="" />
    CSS Classes: site-logo sticky-logo navigation-logo

    – Remove the navigation logo from the customizer

    – Add this CSS:

    @media (min-width: 769px) {
        .main-navigation ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
        li.slideout-toggle {
            -webkit-box-ordinal-group: 0;
                -ms-flex-order: -1;
                    order: -1;
            float: none !important;
        }
        li.start {
            margin-left: auto;
        }
    }

    Let me know πŸ™‚

    #770211
    Chris

    That worked great – thanks!

    #770582
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

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