Changing the menu dropdown background color

@beefstick: Also, this bit of code you posted for me didn’t have any effect on the menu background color. I forgot to add that.

#nav-topbar.nav-container {
	background: #247db5;
}

(And I changed it to nav-header, as I don’t have a topbar menu.)

Which menu? Hueman has 3 menus by default.

These will affect only the drop-down menu, change the color codes as necessary.

Top nav:

/* topbar sub-menu background color */

#nav-topbar ul.sub-menu {
    background: #0DFFFF;
}

/* topbar sub-menu background color for links */
#nav-topbar .sub-menu li > a {
    background: #FF0D7a;
}

/* topbar sub-menu background color  for links when hover */
#nav-topbar .sub-menu li > a:hover {
    background: #FFAC38;
}

Main nav

/* main nav sub-menu background color */

#nav-header ul.sub-menu {
    background: #0DFFFF;
}

/* main nav sub-menu background color for links */
#nav-header .sub-menu li > a {
    background: #FF0D7a;
}

/* main nav sub-menu background color  for links when hover */
#nav-header .sub-menu li > a:hover {
    background: #FFAC38;
}

Footer nav

/* footer nav sub-menu background color */

#nav-footer ul.sub-menu {
    background: #0DFFFF;
}

/* footer nav sub-menu background color for links */
#nav-footer .sub-menu li > a {
    background: #FF0D7a;
}

/* footer nav sub-menu background color  for links when hover */
#nav-footer .sub-menu li > a:hover {
    background: #FFAC38;
}

@techievous: Thank you. That worked. I knew this would be truncated, separated from its previous thread, but it doesn’t look like that presented too much of an issue. It’s the header nav I’m working with. The info for the footer nav will also be useful, so thanks!

You’re welcome. And they could also become useful for others who run into similar issues and find this topic through Google search, too.

If the issue has been resolved, could you please mark this topic as resolved? That would be much appreciated, thank you very much.

Hi, again, Techievous. Even though the code you supplied did in fact change the background color of the dropdown menu, it isn’t exactly the thing I have been trying to change. I am so new at all of this that I feel like I can’t post anything without also apologizing profusely for what I do not know or understand. I haven’t worked with any of this enough to know logically how to refer to things. I can’t even use the word “element” because it has a specific meaning in code, right?

In my initial post, I wrote:

When you mouse over the menu items and the blue font turns black, there is also a background color box that switches from white to grey. That is the background color I’d like to change. What is that called?

All code I’ve tried to change the menu background color, changes something other than that. Even in the code you gave me, when you hover over a menu item, the grey box is still there, unless that item has a dropdown menu, and then hovering there, the color of the background can be changed according to your code. Would the color box/bar that shows up upon hover (in the menu in general, including the dropdowns) be called a menu hover background color?

Thanks again, this time for your patience!

When you mouse over the menu items and the blue font turns black, there is also a background color box that switches from white to grey. That is the background color I’d like to change. What is that called?

What menu item blue font? I don’t see any blue font on the Hueman demo navigation; so it’s probably your site. Could you give us a link to that?

That info is in my initial post, up at the top. I was afraid these issues might arise when this was excised from where it was originally being discussed.

1. Helpers here on the board showed me how to change my menu font colors. I outlined how I had changed them in third paragraph of my initial post:

The active and hover links of the menu are now in black font and the inactive links are a similar blue to the blue in the header/logo image.

2. The site background is white, so white font on a white background resulted in the appearance of no menu at all, unless you moused around and found it. Even then, white font was hard to read. Now, it is black when active or moused over, and blue for the inactive pages.

3. The site is hidden from public view, but I can make it temporarily available, if I know someone is willing to look it over. I can’t leave it open because it’s still a mess.

I’ll open it to the public at large, in five… four… three…

https://www.testsite.surrealprimitive.com

The main site is still set up in the theme Custom Community, but the Test Site subdomain is Hueman.

Main nav menu-item on hover background:

#nav-header .nav > li > a:hover, #nav-header .nav > li:hover > a {
     background: #E80055;
}

Change the colors as necessary.

You can use it together with teh codes provided earlier to change the sub-menu backgrounds to your liking.

—

Edit: I missed a line. Please try again with the updated code.

Thank you! I’ve recently started having some sort of issue with my internet service provider here and it’s acting up again; “This webpage is not available.” As soon as that settles down, I’ll go in and adjust it. I’ll report back and mark this resolved once I’ve done it. I really appreciate your help.

Edit: Good thing I couldn’t work on it yet, lol. When I posted this, I saw your revision.

Let me just post the entire set here so you can work on it easier:

Mainnav menu item on hover

#nav-header .nav > li > a:hover, #nav-header .nav > li:hover > a {
     background: #E80055; /* background color */
     color: #D2FF00; /* font color */
}

Mainnav sub-menu

#nav-header ul.sub-menu {
    background: #000; /* sub-menu background color */
}

#nav-header ul.sub-menu a {
    color: #FFF; /* sub-menu font color */
}

#nav-header .sub-menu li > a:hover {
    background: #000; /* sub-menu hover link background color */
    color: #FFF; /* sub-menu hover link font color */
}

Techievous ~ Perfect! That fixed the main hover boxes. I don’t particularly like the color I selected, but I can change that. I added the code you gave me above for the dropdown backgrounds, same color, and now my navigation bar is set. Fantastic.

Now, to tackle the real bear on that site: setting up the Order page which has product thumbnails + Add to Cart buttons. If you visit the main site and look at the code, you can see what a mess I made of it with inline CSS, trying to get each little combo to line up across the page. I’ll create a new thread for that.

This part is done!

Edit: Oh, wow. When I finished typing and got back to the board, I see you’ve combined it and now I need to compare my stylesheet to what you’ve just posted, make sure I did it right. Thanks again.