XF 2.2 How to style the contents of a main navigation tab dropdown

[Mr Lucky]

I want to apply a style to one specific dropdown. It's easy enough to use .menu-content to style all dropdowns, but I want to know if I can apply a class or ID in any way.

I thought I clould do this using the id of the enclosing container.

For example on xenforo.com, if I wanted to style the What's New dropdown , I can see the container has id js-XFUniqueId114


so I would expect to be able to style the menu content with for example:

#js-XFUniqueId114 .menu-content
{width:500px;font-size:16px}

But this is not doing anything.

Just using .menu-content works but of course applies to all dropdowns, not just the one I want.

Can anyone please help? Thanks

 

[Nicolas FR]

I can see this attribut on What's New menu tab : data-nav-id="whatsNew" maybe you can use it ?
Something like...

[data-nav-id="whatsnew"] {
    .menu-content {
        width:500px;
        font-size:16px
    }
}

 

[Mr Lucky]

I can see this attribut on What's New menu tab : data-nav-id="whatsNew" maybe you can use it ?
Something like...

[data-nav-id="whatsnew"] {
    .menu-content {
        width:500px;
        font-size:16px
    }
}

Thanks, but that doesn't seem to work. I don't think the menu content is contained in that

 

[Nicolas FR]

Right, try this

#js-XFUniqueId114 {
    .menu-content {
        width:500px;
        font-size:16px
    }
}

 

[Nicolas FR]

@Mr Lucky it works for you ?

 

[BassMan]

Right, try this

#js-XFUniqueId114 {
    .menu-content {
        width:500px;
        font-size:16px
    }
}

This will not work because the ID will change on another page.

 

[Mr Lucky]

@Mr Lucky it works for you ?

Sadly not but thanks anyway.

 

[Russ]

Template: PAGE_CONTAINER
CTRL-F inside the editor.
Search for:

<div class="menu menu--structural" data-menu="menu" aria-hidden="true">

Replace with:

<div class="menu menu--structural menu--{$navId}" data-menu="menu" aria-hidden="true">

Then you should be able to use stuff like this:

.menu--whatsNew .menu-content a {
    color: green;
}