[Resolved] Making third navigation mobile friendly

[Chloe]

Hi there

I have posted on this thread https://generatepress.com/forums/topic/add-third-navigation-menu-gpp-1-8/#post-1688547 but now posting new topic so I can add details of the site.

I would like to make the third menu mobile friendly. Also if I can make the active page link a different colour. I can’t work out how to do this.

Many thanks.

Chloe

[Ying]

Hi Chloe,

Try add this CSS in customizer > additional css:

.discrimination-nav ul {
    flex-flow: row wrap;
}

Let me know 🙂

[Chloe]

Hi Ying! That’s great thank you. Works perfectly.

Is there a way to change the colour of the link for the page that you are on? In the same way the other nav does. For example the background is lighter on the page that you are on in the navigation.

Thank you in advance.

Chloe

[Ying]

You could try something like this:

.discrimination-nav .menu-discrimination-container ul li.current_page_item a {
    background-color: #f58538;
}

Let me know how it works 🙂

[Chloe]

Hi Ying. This works perfectly! Thank you so much.

Speak soon.

Chloe

[Chloe]

Hi Ying. Sorry me again.

I had a quick question. I have several different navigations for each page. I have put examples in the Private information. Is there a way of doing this without creating a new hook, snippet and CSS for each one?

Thank you for any advice.

Chloe

[Leo]

You could try if a plugin like this works:
https://en-ca.wordpress.org/plugins/if-menu/

[Ying]

I inspected the navigations, they all have different IDs and css classes, so yes, if you want to create more of them, you’ll need to create more hooks individually for different pages.

For CSS, you could use ,to separate css classes and the css you write below will apply to them all, for example:

.discrimination-nav .menu-discrimination-container ul li.current_page_item a, .unfairdismissal-nav .menu-unfair-dismissal-container ul li.current_page_item a {
    background-color: #f58538;
}

[Chloe]

Oh that’s great. Thanks both. I tried if menu, but not quite what I need. I will try the CSS and create the hooks. Thank you again.

Chloe

[Ying]

You are welcome Chloe 🙂

[Author]

Posts