Please add some kind of class to Navigation

[steve00]

Would be nice if you could add some individual class or data to the top layer navigation in 4.1.x (Browse, Activity, Store, Support) as they all use:

<li id="elNavSecondary_1" class="ipsNavBar_active" data-navext="CustomItem" data-navapp="core" data-role="navBarItem" data-active="" data-originalwidth="103">
<li id="elNavSecondary_2" data-navext="CustomItem" data-navapp="core" data-role="navBarItem" data-originalwidth="101" class="">
<li id="elNavSecondary_4" data-navext="CustomItem" data-navapp="core" data-role="navBarItem" data-originalwidth="91" class="">

and seems no way to add specific css to these li tags (no problem if just adding to your own forum but when designing theme to be exported and sold then no way can you target any of the specific li tags 

[Vikestart]

Oh, there are ways...

.ipsNavBar_primary > ul > li { /*styling here*/ }

 

[steve00]

12 minutes ago, Vikestart said:

Oh, there are ways...

.ipsNavBar_primary > ul > li { /*styling here*/ }

 

Will not work for what I want which is why needs a separate class or data for each li tag

[Vikestart]

10 hours ago, steve00 said:

Will not work for what I want which is why needs a separate class or data for each li tag

So.... use the IDs then.

.ipsNavBar_primary > ul > li#elNavSecondary_1 { /*styling here*/ }

It wouldn't make sense to add classes for each app in the menu, but you can do that on your own by modifying the template.

[steve00]

4 hours ago, Vikestart said:

So.... use the IDs then.

.ipsNavBar_primary > ul > li#elNavSecondary_1 { /*styling here*/ }

It wouldn't make sense to add classes for each app in the menu, but you can do that on your own by modifying the template.

As I stated ...

Quote

no problem if just adding to your own forum but when designing theme to be exported and sold

so no idea what customers ID's would be

If doesn't make sense to add then why are all the others using their own ID and not those ?

[Jim M]

Building off what @Vikestart was mentioning, you could do something like:

.ipsNavBar_primary > ul > li:nth-child(1) { /*styling here*/ }

 

[steve00]

2 hours ago, Jim M said:

Building off what @Vikestart was mentioning, you could do something like:

.ipsNavBar_primary > ul > li:nth-child(1) { /*styling here*/ }

 

that's fine if someone doesn't rearrange the order of the tabs, if they did then css used for those 'childs' would be useless

[Jim M]

1 minute ago, steve00 said:

that's fine if someone doesn't rearrange the order of the tabs, if they did then css used for those 'childs' would be useless

nth-child(1) will always be the first LI element. This will allow you to style the elements in an order irregardless of what navigation element is there.

If you're aiming to edit a specific element, say the "Browse" tab, then yes this would change depending on the user's relocation of the navigation. You will need to edit the template for that and add your ID.

[steve00]

1 minute ago, Jim M said:

If you're aiming to edit a specific element, say the "Browse" tab, then yes this would change depending on the user's relocation of the navigation. You will need to edit the template for that and add your ID.

Exactly ... hence asking for a class or ID to be added as they are for all the other menu items, not sure I could add to template as is it not in a loop and even if not then have to re-do changes in template with every update

Just find strange the is a data-navext or data-navapp  with all the other menu items except the Browse, Activity, Store etc