[Support request] How can I use Navigation as Header EXCEPT on the home page?

[David]

It might be best to rewind.
The Navigation as Header option is not as valid today since we updated the theme in 3.0. Its real benefit is if you’re using the Sticky Navigation as well – is that a requirement?

[Salim]

I really appreciate your time, David.

Ok so I rewound a bit and will outline where I am now:

I don’t need a sticky, it’s currently disabled.

1. I have been able to get the primary navigation to show on the desktop front page without the logo. The primary navigation on the front page I set up as a different “header” element and only shows up when it’s above the header, not if I select float right. Can I have it above the header AND to the right? That’s the only issue I have left to address. Having it as float right makes it disappear, even though primary navigation isn’t linked to the header anymore, it doesn’t let me have it float right when disabled on the “edit page” setting in the layouts section.

2. I have the mobile header enabled, and the logo still shows on it on the front page. Now I’ve been able to get what I needed on the mobile header by using the header element and having a 1 pixel image as the mobile logo. So that’s great.

Looks like I’m almost there 🙂

[David]

Ok thats good 🙂

Just to be clear on #1.
I currently see the Navigation top aligned left.
Below that is your home page logo which is aligned center.

Do you simply want to align the navigation to the left so it remains above the logo?
Or do you want it floated to the right of the logo?

[Salim]

Above the header on the right is fine, for now.

[David]

Try this CSS:

.home #site-navigation .inside-navigation {
    justify-content: flex-end;
}

[Salim]

Fantastic! It works very nicely, thanks.

I think the final thing is that in the mobile menu the menu items are aligned on the left, rather than the right. I tried changing dropdown direction in the customiser but haven’t had luck.

[David]

This CSS to align them right:

@media(max-width: 768px) {
    .main-navigation.toggled .main-nav li {
        text-align: right;
    }
}

Or this CSS if you want to align them right and flip the toggle to the right. Although its more accessible if you dont.

@media(max-width: 768px) {
    .main-navigation.toggled .main-nav li {
        text-align: right;
    }

    .main-navigation.toggled .main-nav li.menu-item-has-children a {
        display: flex;
        flex-direction: row-reverse;
        padding-right: 20px;
    }
}

Other alternative is to use the Off Canvas Panel on mobile set to Open from Right, this will align the Menu Drop Down to the right ( not the text )

[Salim]

You’re my hero! Thanks for your help and patience. You’ve been brilliant. Really appreciate it.

[David]

Glad to be of help!

[Author]

Posts