Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Make the menu widget "inline"

Home Forums Support Make the menu widget "inline"

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #478277
    William

    Hi,

    I’ve been playing around with primary and secondary navigation, as well as header widgets to achieve a specific look for the top part of my website, but I can’t quite seem to hit the mark, although I’m getting pretty close. I figured I’d draw what I’m looking for using Paint to better illustrate what I want. Note that the lines on the picture are not to be displayed, they just illustrate the various sections. Here it is :

    Expected header layout

    The part I’m interested in is the one in red, the (contained) header and navigations. I think the primary menu is all set and does not need to change and only two changes are needed to reach my target.

    First, there’s a header widget that contains my secondary menu, but I would like it to be horizontal instead of vertical. The widget is called “Navigation Menu”, I don’t know if it comes with WordPress or with GeneratePress. I tried using the secondary navigation instead and having it float right, but it then moves to the right of the social icons instead of underneath them. I’m guessing the header widget is just a list somewhere and I could change it using “display: inline;” if I can find the correct css selector to use that on so maybe that’s easier than using the secondary navigation and moving it below the social icons.

    Second, the logo would need to be vertically centered inside the header, but I’m not really sure how to go about that.

    Any pointers would be appreciated, maybe just some css selectors I can mess around with.
    Thank you!

    GP Premium 1.5.6
    #478280
    William

    Hmm, it looks like I messed up the image link. Here it is : https://ibb.co/c08RpG

    #478457
    Leo
    Staff
    Customer Support

    Hi there,

    Are you able to link us to the site in question?

    Thanks!

    #478516
    William

    Hello,

    I apologize, I could have sworn that I did when creating the thread. My bad, here it is : https://www.itwillbeapps.com

    Thank you!

    #478564
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    First, set the Lightweight Social Icons widget to right alignment.

    Then add this CSS:

    .site-logo {
        margin-top: 15px;
    }
    
    .header-widget .widget_nav_menu li {
        display: inline-block;
        margin: 0 20px;
    }
    
    .header-widget {
        max-width: 70%;
    }
    
    .header-widget .widget {
        margin-bottom: 0;
    }

    Let me know 🙂

    #479009
    William

    Perfect! That’s exactly what I was looking for.

    Thank you!

    #479016
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.