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

Mr Lucky

Well-known member
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
Screenshot 2021-12-02 at 15.03.15.png

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

Code:
#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
 

nicodak

Well-known member
I can see this attribut on What's New menu tab : data-nav-id="whatsNew" maybe you can use it ?
Something like...
Less:
[data-nav-id="whatsnew"] {
    .menu-content {
        width:500px;
        font-size:16px
    }
}
 

Mr Lucky

Well-known member
I can see this attribut on What's New menu tab : data-nav-id="whatsNew" maybe you can use it ?
Something like...
Less:
[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
 

Russ

Well-known member
Template: PAGE_CONTAINER
CTRL-F inside the editor.
Search for:
Code:
<div class="menu menu--structural" data-menu="menu" aria-hidden="true">

Replace with:
Code:
<div class="menu menu--structural menu--{$navId}" data-menu="menu" aria-hidden="true">
8qiWtIi.png


Then you should be able to use stuff like this:

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