XF 2.2 Change menu dropdown background color and text color

[Deleted member 241496]

Someone recommended that we change our dropdown menu's from the main navigation to match our other styling. However, we can't find it in the style properties area. I thought it would be 'Navigation row - menu open' but that didn't change anything. We want to make the text #FFDE59 and the background #000000. If you need to look what we are talking about, its the dropdown menu under 'Media', 'Our EVs', etc. at www.talkingevs.com. Thanks, we would be lost without your help so far!

 

[Old Nick]

That was me !

Put this in your extra.less template

.menu-linkRow {
    background: #000;
    color: #FFDE59;
}

.menu-linkRow:hover {
    background: #333;
    color: #FFDE59;
}

 

[Deleted member 241496]

That was me !

Put this in your extra.less template

.menu-linkRow {
    background: #000;
    color: #FFDE59;
}

.menu-linkRow:hover {
    background: #333;
    color: #FFDE59;
}

Thanks

 

[Deleted member 241496]

Just noticed that this changed the user dropdown menu now too. What area or code controls the background for those gray areas?

 

[Deleted member 241496]

Any ideas? I don't want this to have a black background. Just the main menu dropdowns.

 

[Old Nick]

So you have to edit the XF templates too not only the extra.less because all those items have the same class .menu-linkRow

 

[Deleted member 241496]

So you have to edit the XF templates too not only the extra.less because all those items have the same class .menu-linkRow

So which templates would i edit then for that change to show only for the main nav dropdowns?

 

[Old Nick]

I must specify that this would be my method and that I do not know of a better one, but perhaps other members would have better to advise you.

You have to make changes in this template account_visitor_menu
This part of code

    <!--[XF:menu_separator:below_visitor_panel]-->
    <hr class="menu-separator menu-separator--hard" />

    <ul class="listPlain listColumns listColumns--narrow listColumns--together">
        <!--[XF:content_links:top]-->
        <xf:if is="$xf.options.enableNewsFeed">
            <li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
        </xf:if>
        <li><a href="{{ link('search/member', null, {'user_id': $xf.visitor.user_id}) }}" class="menu-linkRow">{{ phrase('your_content') }}</a></li>
        <li><a href="{{ link('account/reactions') }}" class="menu-linkRow">{{ phrase('reactions_received') }}</a></li>
        <!--[XF:content_links:bottom]-->
    </ul>

    <!--[XF:menu_separator:below_content_links]-->
    <hr class="menu-separator" />

    <ul class="listPlain listColumns listColumns--narrow listColumns--together">
        <!--[XF:account_links:top]-->
        <li><a href="{{ link('account/account-details') }}" class="menu-linkRow">{{ phrase('account_details') }}</a></li>
        <li><a href="{{ link('account/security') }}" class="menu-linkRow">{{ phrase('password_and_security') }}</a></li>
        <li><a href="{{ link('account/privacy') }}" class="menu-linkRow">{{ phrase('privacy') }}</a></li>
        <li><a href="{{ link('account/preferences') }}" class="menu-linkRow">{{ phrase('preferences') }}</a></li>
        <xf:if is="$xf.visitor.canEditSignature()">
            <li><a href="{{ link('account/signature') }}" class="menu-linkRow">{{ phrase('signature') }}</a></li>
        </xf:if>
        <xf:if is="$xf.app.userUpgradeCount">
            <li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
        </xf:if>
        <xf:if is="$xf.app.connectedAccountCount">
            <li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
        </xf:if>
        <li><a href="{{ link('account/following') }}" class="menu-linkRow">{{ phrase('following') }}</a></li>
        <li><a href="{{ link('account/ignored') }}" class="menu-linkRow">{{ phrase('ignoring') }}</a></li>
        <!--[XF:account_links:bottom]-->
    </ul>

    <!--[XF:menu_separator:below_account_links]-->
    <hr class="menu-separator" />

    <a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>

I would replace all the menu-linkRow classes with menu-linkRow-custom for example
And put this in extra.less template

.menu-linkRow-custom {
    display: block;
    padding: 6px 15px 6px 12px;
    border-left: 3px solid transparent;
    color: #141414;
    text-decoration: none;
}

Maybe you will have to add some css again but you can begin with this and see...

 

[Deleted member 241496]

PERFECT!!!