Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Support request] How to center main navigation on page with logo on left?

Home Forums Support [Support request] How to center main navigation on page with logo on left?

Home Forums Support How to center main navigation on page with logo on left?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #498305
    p

    Trying to accomplish this:

    http://prntscr.com/ifp1ga

    Main nav is centered… secondary nav “More” will open pop out menu on the right.

    Logo is aligned left on the page (not far left, still within “contained” area).

    I couldn’t find an answer in the forums. Thanks

    #498600
    Tom
    Lead Developer
    Lead Developer

    The general layout can be achieved with this CSS:

    .inside-header {
        display: flex;
        justify-content:  space-between;
    }
    
    .inside-header .site-logo {
        order: 1;
        margin-right: auto;
    }
    
    .inside-header .main-navigation {
        order: 2;
        margin-left: auto;
        margin-right: auto;
    }
    
    .inside-header .secondary-navigation {
        order: 3;
        margin-left: auto;
    }

    Set your Secondary Navigation to float right, and add a custom link to the menu:

    URL: #
    Class: slideout-toggle
    Label: Menu

    Let me know if this does the trick or not πŸ™‚

    #501502
    p

    Thanks, Tom… just to be clear, your code was just some starting code to get key pieces in place, correct? e.g., it wasn’t meant to actually be the sidebar menu, with functionality, right? And if not, tips on that piece? Would you hard code this, or use a plugin? Thank you!

    #501638
    Tom
    Lead Developer
    Lead Developer

    That’s right – it’s just something to get us most of the way there.

    If you add it and set up your menus, we can get it the rest of the way there πŸ™‚

    #501810
    p

    Thanks, Tom – here’s what I have so far – dropped in the code you provided and the menu has been added:

    http://dev2018.physicalgoldfund.com/

    Thoughts on next steps? Thank you!

    #502166
    Tom
    Lead Developer
    Lead Developer

    Your secondary navigation needs to remove all of those menu items, then add a single custom link:

    URL: #
    Class: slideout-toggle
    Label: More

    #502234
    p
    #502477
    Tom
    Lead Developer
    Lead Developer

    That’s pretty close already – I’m impressed!

    Next, you’ll want to turn on the slideout navigation – set it to “Both”. Then add this CSS:

    .main-navigation .slideout-toggle {
        display: none !important;
    }

    Then you’ll want to match the Secondary Nav style with the primary nav (background color, font size, margin top etc..).

    #502958
    p

    Thanks, Tom… really appreciate the extra help. Quick question, what does that last bit of CSS do?

    .main-navigation .slideout-toggle {
    display: none !important;
    }

    Since I added the slideout toggle to the secondary navigation, not the main navigation, I’m not sure I follow what that CSS is for.

    I’m getting close on the setup, though, so thanks again: http://dev2018.physicalgoldfund.com/

    #503112
    Tom
    Lead Developer
    Lead Developer

    Since you had to enable the slideout navigation, we want to remove it from the main navigation, where it’s added automatically.

    That looks great! I’m impressed πŸ™‚

    #506005
    p

    Hi, Tom – my header and navigation is a bit of a mess on mobile. Thoughts on how to start cleaning this up? I’m not sure about best practices in terms of how to set up the nav for mobile when you have dropdown nav AND a slideout nav setup. I’m thinking the regular nav becomes the hamburger as usual, then you have the magnifying glass next to that… and then maybe the word “MORE” is still there, to trigger the slideout.

    BTW, can you please send me your donation link? Your help really is impressive, as is this theme… the the plugins you recommend are the best I’ve seen (lightweight, great support etc). So, really appreciate it!

    #506148
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like you’ve enabled the mobile header on mobile, which is definitely what I suggest doing.

    I’m not sure how easy it would be to achieve what you described there, but we can try if you’d like to turn off the mobile header.

    Thank you! Here’s our donate page: https://generatepress.com/ongoing-development/

    Really appreciate it πŸ™‚

    #519642
    p

    Thanks, Tom, just made a donation.

    So, couple quick questions. As you may recall we are doing a flyout menu with some additional menu links:
    http://dev2018.physicalgoldfund.com/

    I’m trying to figure out how to deal with this menu on mobile. Right now when you look at the site on mobile only one hamburger menu shows up, and it opens the flyout panel. The main nav isn’t visible. I’m wondering if for mobile I should just tuck the flyout items in the actual main nav and lose the flyout panel altogether. So, have the flyoutpanel for desktop, but not for mobile. Your quick thoughts? Also, how can I get the hamburger to show the main nav onclick, and not the flyout? Not sure how to tweak those settings.

    And finally, I have a lot of anchor links in the header sections of pages, and I’m running into an issue where when I toggle to the visual editor, they disappear. So, for example, this:

    <p id=”lm” style=”text-align: center; margin-top: 50px;”><i class=”fa fa-angle-down” style=”font-size:48px;”></i></p>

    … becomes this:

    <p id=”lm” style=”text-align: center; margin-top: 50px;”></p>

    Thoughts on how to stop the anchors from disappearing?

    Thanks again!

    #520326
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You should just need to disable the slideout navigation on mobile – you can set it to “Desktop only”.

    Then the mobile menu should open the main menu.

    As for the HTML stripping – WordPress will strip empty elements. The way to prevent this is to add an HTML comment into the icon:

    <i><!-- icon --></i>

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