Support » Theme: Florence IT » How to change menu hover color and current visiting page color

  • Hi,
    I want to change menu hover color and current visiting page color. currently in red color i want to change to blue. Next when keep mouse pointer on the menu underline should appear below the menu in blue color.

    below is my css

    /* Header menu CSS
    —————————————————*/
    #menubar{
    background-color:#fff;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    }
    .toggle{
    display: block;
    }
    .toggle a{
    background:url(images/mobilemenu.png) no-repeat right center #c01d06;
    color:#ffffff;
    padding:10px 10px;
    font-size:16px;
    text-align:left;
    }
    .toggle a:hover{
    color:#ffffff !important;
    }
    .hdrmenu{
    padding:0;
    display:none;
    }
    .hdrmenu ul {
    margin:0;
    padding:0;
    font-family:’Roboto’, sans-serif;
    font-weight:400;
    font-size:15px;
    }
    .hdrmenu ul li{
    display:inline-block;
    margin:0;
    position:relative;
    text-align:center;
    }
    .hdrmenu ul li a{
    padding:32px 10px;
    display:block;
    color:#fff;
    }
    .hdrmenu ul li ul li{
    display:block;
    position:relative;
    float:none;
    top:-1px;
    border-bottom:1px solid #777;
    }
    .hdrmenu ul li ul li a{
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    position:relative;
    top:1px;
    text-align:left;
    border-right:none !important;
    }
    .hdrmenu ul li a:hover
    .hdrmenu ul li.current_page_item a{
    color:#3dbbe6;
    }

    .hdrmenu ul li ul{
    display:none;
    z-index:99999;
    position:relative;
    }
    .hdrmenu ul li:hover > ul{
    display:block;
    width:200px;
    position:absolute;
    left:0;
    text-align:left;
    background-color:rgba(0,0,0,0.1);
    }

    .pageheader .hdrmenu ul li:hover > ul{
    background-color:rgba(0,0,0,1);
    }

    .hdrmenu ul li:hover ul li ul{
    display:none;
    position:relative;
    }
    .hdrmenu ul li:hover ul li:hover > ul{
    display:block;
    position:absolute;
    left:200px;
    top:1px;
    }

    /*dropdown arrow*/
    .hdrmenu .menu li > a.parent {
    padding-right: 2em;
    position: relative;
    }
    .hdrmenu .menu li > a.parent::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #fff transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 0.3em;
    content: “”;
    display: block;
    position: absolute;
    right: 0.8751em;
    top: 48%;
    }
    .hdrmenu .menu li ul li a.parent {
    padding-right: 0;
    }
    .hdrmenu .menu li ul li a.parent::after {
    right: 0.8751em;
    top: 46%;
    }

    please help me i am new to wordpress.

    website: http://faithbegins.org/

    Thank you

  • The topic ‘How to change menu hover color and current visiting page color’ is closed to new replies.