change nav bar color

Hello!

For some reason, your background gradient rules are being overwritten by another rules. Try changing your CSS properties to this (I am not sure how it will work in different browsers):

background-image: -moz-linear-gradient(top, white, #f2f2f2)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#f2f2f2))!important;
background-image: -webkit-linear-gradient(top, white, #f2f2f2)!important;
background-image: -o-linear-gradient(top, white, #f2f2f2)!important;
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2)!important;

Let me know if it solved the issue! If I can help you in anything else, just post it here!

Greetings,
Balint

Thank you, Balint! I made your changes, which changed the nav bar to all white with the purple border I’d previously created. But this got me started by pinpointing the lines of code I needed to change! I adjusted your code above to incorporate the purple I wanted, inserted the below code, and it worked. Not sure if I did this correctly and if there isn’t some improper code in there now, but it’s working so I’m very happy. Thank you so much!

background-image: -moz-linear-gradient(top, white, #f2f2f2)!important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#83579a))!important;
background-image: -webkit-linear-gradient(top, purple, #83579a)!important;
background-image: -o-linear-gradient(top, white, #f2f2f2)!important;
background-image: linear-gradient(to bottom, #83579a, #83579a)!important;

you can now see my purple nav bar at https://blog.roommates4boomers.com

I also succeeded in getting the font to change color when hovering over a menu item, but I can’t figure out what to change in the code to make the menu item for the selected change STAY that color, to indicate what page you’re on. The “hover color” is #FCB721 but you can see that once a menu item is clicked and you’re on the selected page, all menu items display white, even the page selected. There are many sections of code that seem to designate the font color during “hover” or “active,” but I’ve changed a ton of these from #fff to #FCB721 !important and the changes have had no effect.

If you can help, I’d be grateful.

Hello! I am glad that I could help you ??

Regarding the active menu item, the CSS hover or active “states” are connected to the mouse cursor. A link on a website by itself is in “link” state. If you move the cursor over a link, than it is in “hover” state, in the moment when you are clicking to the link than it is in “active” state (while the mouse button is actually pushed down on the link). When there is a link that you have already visited (the link address is already in your web browser’s history), then it is in “active” state.

The better way to determine our current location on a WordPress site is by calling WordPress for help. In most themes, WordPress automatically adds a CSS ID or class to the menu item on which page we are currently on. In your case, this is the class .current-menu-item. So with this code, I was able to make the current menu item different color:

.current-menu-item {
  background: none repeat scroll 0 0 #FCB721;
}

And it looks like this: https://d.pr/i/L3dd
Of course you can add a number of other rules to this class to achieve your wish in the site’s design.

If you have any more questions, just drop a line here, I am happy to help! ??

Have a great day!
Balint