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

[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

[Tom]

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 🙂

[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!

[Tom]

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 🙂

[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!

[Tom]

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

URL: #
Class: slideout-toggle
Label: More

[p]

Ah, ok, all set:

http://dev2018.physicalgoldfund.com/

[Tom]

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..).

[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/

[Tom]

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 🙂

[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!

[Tom]

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 🙂

[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!

[Tom]

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>

[Author]

Posts