X-PRO - Different colors on drop-down from main menu?

Support
#1

Have just purchased Pro, becasue I want to be able to edit the top bar in a more advanced way. Have looked at the introduction movies but I can’t find what I am looking for. I’l like to click on a Top menu item and then get a drop-down with different pages THAT would have different colors. How do I do that? The baground of the dropdown page selection should be blue, red, black etc, with white or black text inside
Thanks

#2

HI,

To achieve that, you can add a class to your parent menu item.

Then use that class to add background color to your submenu.

eg. Add this in Theme Options > CSS

.blue-bg .sub-menu {
   background:blue;
}

Do the same for other menus.

Hope this helps

#3

Thanks for the answer, yes it is working for sub-menu as I tried out what you suggested. But I’d like if possible each sub-menu has it’s own colors. What is the CSS code for that? I tried to remove sub, but it didn’t work… Thanx

#4

Hi Eide,

You can enhance the given CSS and use your own class selector, example,

.blue-bg .sub-menu {
   background:blue;
}
.green-bg .sub-menu {
   background:green;
}
.red-bg .sub-menu {
   background:red;
}

Then you can simply add blue-bg, green-bg, or red-bg as provided in the screenshot. You have to add it on top level menu item’s class (parent menu).

Thanks!

#5

Thanx for the answer. Sorry, I still don’t understand. As the picture shows, the whole list of pages turns red as I specify sub-menu on the parent. I’d like, if possible to get all sub-menus with different colors, red for nanofrac, blue for the next page, nanolace.
Thanx again

#6

Hi,

In that case, you need to add a class to each submenu item and not the parent menu.

For example, add class nanofrac to your nanofrac submenu then add color to it using the code below.

.nanofrac {
     background:blue;
}

Next add nanolace class to your nanolace submenu, then add the code below

.nanolace {
     background:red;
}

Do the same for other submenu items.

Hope that makes sense

#7

Thank you so much, now the background colors can be change for each sub-menu, that was easy. Now the problem I have I need to change the text color of the sub-menu to white (As black background does not show white text). I don’t want to change all menu-items text in the overall settings, just the text in the colored sub-menus. Have been trying for a while but don’t find the proper CSS. Can you please help me? Thanks

#8

Hello Eide,

Thanks for updating the thread.

In the previous threads wherein my colleagues suggested you to assign class to submenus, you just need to add CSS color property.

. nanofrac a {
    color: #ddd !important;
}

Thanks.

#9

That is the easy answer I was looking for - IT IS WORKING. But now the hover changes. So can I just add a:hover and change that as well? Thanks again you are great!

#10

I actually solved it by adding extra CSS, maybe you can do it in an easier way (See beneath)? anyway !important was a must to have, as it didn’t work on the mobile without (it just got white) :
.nanofrac a {
background:red !important;
color: white !important;
font-weight: bold;
padding: 8px 10px !important;
border: solid 1px #0c0c0c !important;
}
.nanofrac a:hover {
background:white !important;
color: black !important;
font-weight: bold;
padding: 8px 10px !important;
border: solid 1px #0c0c0c !important;

Thanks again for your support!

#11

Hi Eide,

I have tested your mobile menu and it seems to be functioning properly now.

Make sure to purge full cache before testing (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Thanks!

#12

I tried this on my website and it did not work at all. My drop down menu buttons have white text on white backgrounds.

#13

Hi @Ekpebu,

Thank you for reaching out to us. Can you please create a new thread with your site link so we can take a look? Posting on someone else’s thread create lot of confusion and slows down the response time. For faster response we encourage users to create a new ticket. In that regards I request you to please create a new ticket and someone from support team will take a look. For more details please take a look at our support handbook.

Thank you!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.