Click here to Skip to main content
14,384,739 members
Rate this:
Please Sign up or sign in to vote.
See more:
At this fiddle, I've got a menu bar (ul) in a nav. The hovering colors of the menu items are okay for now, but I want the entire "menu bar" (nav) to have a different color than the lightyellow background (forestgreen, perhaps).

I've tried assigning color, background, and background-color to the nav element in the CSS, but it doesn't do what I want (the latter two seem to do nothing).

How can I give my menu bar/nav a background color to set it off from the rest of the page?
Sergey Alexandrovich Kryukov 10-Sep-15 16:41pm
How can it be a problem? Add a class attribute to this element, describe CSS properties for this class... :-)
B. Clay Shannon 10-Sep-15 16:49pm
Which element? As mentioned, I tried this and that on the Nav. The question is: which element, subelement, or class needs which rule[s]?
Sergey Alexandrovich Kryukov 10-Sep-15 17:06pm
It's a matter of your design. I would say, your color color problem is with the class "top-level-menu", which is used by the element <ul class="top-level-menu">, but it could be it's parent element nav. You pointed out this element yourself, so how could you ask "which element"?
B. Clay Shannon 10-Sep-15 17:21pm
Because changing the values did nothing (good).
Sergey Alexandrovich Kryukov 10-Sep-15 18:52pm
Sounds weird. At least the change in background-color should affect the appearance...
Sergey Alexandrovich Kryukov 10-Sep-15 19:15pm
Okay, now I see what's going on. It's simple. All right, I explained everything in Solution 1, so now you can continue working at styles.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Oh, I got it. The problem is pretty simple: you color the background of nav element, but its child fills all the background, and the background color of this element (top-level ul) overrides the color according to its class="top-level-menu". In turn, the set of top-level li elements, children of your top-level ul, also fills in all the background space of its parent, so changing its background is also not visible. And only if you change the background of the set of top-level li elements, 'Schedules', 'Job/Locations', 'Workers', 'Rules' and 'Help', you will see the difference in background. For example, you can add another class to each of these li elements.

I understand, it may sound not very optimal, compared to you initial idea to modify the style of only one element, but this just the design you created or used. Anyway, adding a new class for these 5 elements will be the smallest change in this situation. (Anyway, your elements already have a lot of attributes. In particular, why having name attributes if you already have id, and, of course, menu is not in a form, or, in all cases, menu items would not be submitted with some form's data, which would otherwise be the only reason to have name attributes.)

So, this is the simplest immediate fix. I just tried it. Perhaps you can try semi-transparent colors, then background colors of parents could mix with background colors of children. Or you could change the whole design somehow. By the way, you will need a hole lot of style improvements. For example, all items look ugly because their texts are pressed against the left edges of the elements' bounding rectangle, which can be fixed using padding. And so on…

B. Clay Shannon 11-Sep-15 13:14pm
Yes, I admit it's 9X uglier than a bag of butts. I will have to either learn CSS a lot better, or partner with a CSS wizard.
Sergey Alexandrovich Kryukov 11-Sep-15 16:50pm
Good idea. It's not so difficult and can mostly be figured by design and implementation practice.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100