Making third navigation mobile friendly

Hi Chloe,

Try add this CSS in customizer > additional css:

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

Let me know :)

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

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

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

Speak soon.

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

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

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;
}

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

You are welcome Chloe :)