Support » Fixing WordPress » How to change Menu Bar Color in Nuntius Theme
How to change Menu Bar Color in Nuntius Theme
-
I am trying to change the menu bar color on my site I am making to be a different color than the header. I want the menu to be #565c6a with the header remaining in the blue color it is.
Also I want to remove the side borders between the menu items so that it looks like it is text on a seamless background color in the menu.
Here is my primary menu code with the color added in where I thought it should go, but the header color is overriding what I want it to be
see: http://www.styletheology.com
CSS code:
/* =Primary Menu -------------------------------------------------------------- */ #menu-primary { background-color: #565c6a; border-bottom: 5px solid #000; border-top: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 5px 9px rgba(0, 0, 0, 0.4); clear: both; float: left; margin-bottom: 0px; width: 100%; } #menu-primary div { margin: 0 auto; width: 1050px; } #menu-primary div ul { float: left; list-style: none; margin: 0; } #menu-primary li { float: left; margin: 0; position: relative; } #menu-primary a { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1); color: #f2e76e; display: block; font-family: Copperplate Gothic Light,Georgia,Times,’Times New Roman’,serif; font-size: 14px; padding: 2px 17px 2px 17px; text-decoration: none; } #menu-primary ul ul { background-color: #000000; border: 0; display: none; float: left; font-weight: normal; margin-left: 0 !important; padding: .8em; position: absolute; top: 50px; left: 0; text-transform: none; z-index: 99999; width: 180px; } #menu-primary ul ul li, #menu-primary ul ul ul li { background: none; } #menu-primary ul ul ul { left: 100%; top: 0; } #menu-primary ul ul a { box-shadow: none; color: #fff; line-height: 1.4; padding: .5em .5em 1em; min-width: 165px; height: auto; } #menu-primary li:hover > a, #menu-primary ul ul :hover > a { background: #3a4a73; color: #fcee4a; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; } #menu-primary ul ul a:hover { background: #3a4a73; } #menu-primary ul li:hover > ul { display: none; } #menu-primary .current_page_ancestor > a, #menu-primary .current_page_item > a, #menu-primary .current_page_parent > a, #menu-primary .current-menu-ancestor > a, #menu-primary .current-menu-item > a, #menu-primary .current-menu-parent > a { background: url("images/primary-menu-current.png") no-repeat scroll center bottom transparent; color: #eee; } #menu-primary .current_page_ancestor > a:hover, #menu-primary .current_page_item > a:hover, #menu-primary .current_page_parent > a:hover, #menu-primary .current-menu-ancestor > a:hover, #menu-primary .current-menu-item > a:hover, #menu-primary .current-menu-parent > a:hover { background: #090909; color: #eee }
All help is extremely appreciated!
-
It’s being overridden by color set in the internal styles. But you can override it by using !important in the color you want:
#menu-primary { background-color: #565c6a !important;
The “borders” are the box-shadows in here:
#menu-primary a { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1); color: #F2E76E; display: block; font-family: Copperplate Gothic Light,Georgia,Times,’Times New Roman’,serif; font-size: 14px; padding: 2px 17px; text-decoration: none; }
BTW, see this before posting code again:
Thanks so much, that fixed it.
- The topic ‘How to change Menu Bar Color in Nuntius Theme’ is closed to new replies.