Support » Fixing WordPress » How to change Menu Bar Color in Nuntius Theme

  • Resolved styletheology

    (@styletheology)


    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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:

    http://codex.wordpress.org/Forum_Welcome#Posting_Code

    Thread Starter styletheology

    (@styletheology)

    Thanks so much, that fixed it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change Menu Bar Color in Nuntius Theme’ is closed to new replies.