Footer - multicoloured navigation inline

[Markhad]

I wish to have each item in my navigation a different colour. I have been playing around and can’t get exactly what i want. So far I can:

1. Use the navigation inline but each element in the menu has the same colour
2. Use images as links but the text isn’t very sharp
3. Use text boxes with background colours but only the text is the link, not the box and it’s not as nice as the inline navigation in how it works
4. Setup a separate menu for each menu item but that seems very time consuming and am hoping there’s a better way

On a separate note, when I add a footer it causes the scrolling on my iPhone (portrait only) to stutter. It only seems to be on the iPhone, but is fine in landscape. Removing the footer solves the problem. Enabling/disabling the smooth scrolling plugin makes no difference.

Any advice?

[Joao]

Hi There,

You can add that by targetting each menu item id with CSS.

For the following example, I am using Chrome, but you can achieve the same with other browsers, I personally prefer Chrome most of the time for that.

So in the example below, I inspected the menu item.

You will see on the right side you have the menu item´s list and each menu has it respective ID

On the very left tab you will find the CSS path, the CSS path is for the general items, so you will need to ad to the li the id number which will look like :

.x-colophon.bottom .x-nav li#menu-item-7684 a {
color: #324454
}

If you are using PRO the syntax might be a bit different, but you will be able to find out the same way.

Hope that helps and in case you need further assistance with that, please provide your URL.

Thank you

[Markhad]

Thanks, that makes sense I’ll look into that. Please can you help re the stick on the iPhone point at the bottom of my OP or would you prefer a new thread?

[Joao]

Hi Mark,

Please provide your URL so we can take a closer look as this is not a known issue.

Thank you

[Markhad]

Saved as private belie

[ruenel]

Hello There,

Thanks for sending the url of your site. I have inspected the page and it seems that you have setup the footer in correctly. Please make your bar container as row, set a maximum width if needed and enable the scrolling. In each of your elements, navigation inline and text element, please set it as a column. For more help in setting the elements and understand how flex layout works, please check out this video tutorial:
https://theme.co/apex/forum/t/elements-tips-and-tricks/214

Hope this helps. Please let us know how it goes.