XF 2.2 Change menu dropdown background color and text color

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!
 

nicodak

Well-known member
That was me ! 😀

Put this in your extra.less template
Less:
.menu-linkRow {
    background: #000;
    color: #FFDE59;
}

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

nicodak

Well-known member
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
HTML:
    <!--[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
Less:
.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...
 
Top