XF 2.2 Change menu dropdown background color and text color

  • Thread starter Deleted member 241496
  • Start date

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!

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

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?

Nicolas FR

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
    <hr class="menu-separator menu-separator--hard" />

    <ul class="listPlain listColumns listColumns--narrow listColumns--together">
        <xf:if is="$xf.options.enableNewsFeed">
            <li><a href="{{ link('whats-new/news-feed') }}" class="menu-linkRow">{{ phrase('news_feed') }}</a></li>
        <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>

    <hr class="menu-separator" />

    <ul class="listPlain listColumns listColumns--narrow listColumns--together">
        <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 is="$xf.app.userUpgradeCount">
            <li><a href="{{ link('account/upgrades') }}" class="menu-linkRow">{{ phrase('account_upgrades') }}</a></li>
        <xf:if is="$xf.app.connectedAccountCount">
            <li><a href="{{ link('account/connected-accounts') }}" class="menu-linkRow">{{ phrase('connected_accounts') }}</a></li>
        <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>

    <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...