Can't change color of text in mega-menu

eagle1288

Hi I have two mega-menu's and I'm trying to change the text so I can see the words better, but every way I have tried I don't see any changes. Admin Mega-Menu is red when I select or hoover which I like but Main Mega-Menu is a blue which I don't like. How do I change the colors?

saguaros

Hi eagle1288

You can try to change in Theme Color settings here:

eagle1288

Never mind I found where my problem was and that the two were set on two seperate palets. It's now working like it's supposed to do the only problem I have now is the text in the drop-down menu is the same color but the two have two different background color. I know I can set the background color to match the mega menu area but this is not what I want to do. So how do I set the text in the drop-down menu different then the mega menu?saguaros

eagle1288

Okay it works on the main menu but not on the admin menu@saguaros#168566

saguaros

eagle1288 Could you share screenshots of how you want it should be?

eagle1288

I'm not sure how to change the color but in the two dropdown boxes I would like the text color to be a med. blue not the same as the Mega-menu text color.saguaros

saguaros

eagle1288

You can override by this custom CSS:

.t4-palette-dark_copy .t4-megamenu .nav>li.show a, .t4-palette-dark_copy .t4-megamenu .nav>li.show .nav-link {
    color: #627e97 !important;  /*change to your desired color*/
}

put into the file: /Test/templates/t4_bs5_blank/css/custom.css

eagle1288

That did't work same results as I was getting when I tried. It changed the color of the text to include the hover color which is the same results.

saguaros

eagle1288 Which color you want to change to?

And how you want it should be?

eagle1288

I want the text inside the dropdown box to be #3446eb but the text in the mega menu to stay the same as it is (Callers/Cuers) when I hoover or select red. Also the same with "Clubs" inside the dropdown box #3446eb and the select hoover red. On the top menu (Area Councils/Sites) same as above.

saguaros

eagle1288

With these customization, you could use Inspect element editor in web browser you're using. Just right click on the element you want to style, in this case is menu item, you will see how it's style on the right panel and simply override the current css rule and add to 'custom.css' file on your site.

For example, you right click on Callers / Cuers, you can see this:

.t4-palette-dark_copy .nav > li a, .t4-palette-dark_copy .nav > li .nav-link {
    color: #627e97;
}

On hover, it would be:

.t4-palette-dark_copy .t4-megamenu .navbar-nav > li a:hover,
.t4-palette-dark_copy .t4-megamenu .navbar-nav > li a:focus,
.t4-palette-dark_copy .t4-megamenu .navbar-nav > li a:active,
.t4-palette-dark_copy .t4-megamenu .navbar-nav > li .nav-link:hover,
.t4-palette-dark_copy .t4-megamenu .navbar-nav > li .nav-link:focus,
.t4-palette-dark_copy .t4-megamenu .navbar-nav > li .nav-link:active {
    color: red;
}

For menu item in dropdown, you can override this:

.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > a,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > .nav-link,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li .dropdown-item {
    color: #627e97 !important;
}

On hover:

.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > a:hover,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > a:focus,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > a:active,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > .nav-link:hover,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > .nav-link:focus,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li > .nav-link:active,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li .dropdown-item:hover,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li .dropdown-item:focus,
.t4-palette-dark_copy .t4-megamenu .dropdown-menu li .dropdown-item:active {
    color: var(--mainnav-link-hover-color);
}