Change color of MENU (both mobile toggle and desktop)

  • calvinyoo

    #10249

    Hi,

    I just wish to change the colour of menu:

    1. mobile toggle (before hover, hover, pressed)

    2. desktop mode menu (before hover, hover, active)

    Could you please help advise how to modify the colour setting of above six modes in CSS. TQ.

    Kevin

    #45711

    I’d like to know how to do this too!

    Admin

    Syahir Hakim

    #45712

    This is the full CSS code for the menu colours. Copy the ones that you need to change into the theme’s Custom CSS option and change the colour codes accordingly.

    Might be easier to pinpoint which code you need to change by using the Inspector feature of the Developer’s Tools in Chrome and Firefox.

    .navbar-inverse {
    background-color: #222;
    border-color: #080808;
    }
    .navbar-inverse .navbar-brand {
    color: #9d9d9d;
    }
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus {
    color: #fff;
    background-color: transparent;
    }
    .navbar-inverse .navbar-text {
    color: #9d9d9d;
    }
    .navbar-inverse .navbar-nav > li > a {
    color: #9d9d9d;
    }
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: transparent;
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #080808;
    }
    .navbar-inverse .navbar-nav > .disabled > a,
    .navbar-inverse .navbar-nav > .disabled > a:hover,
    .navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #444;
    background-color: transparent;
    }
    .navbar-inverse .navbar-toggle {
    border-color: #333;
    }
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
    background-color: #333;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
    }
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
    border-color: #101010;
    }
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #080808;
    }
    .navbar-inverse .navbar-link {
    color: #9d9d9d;
    }
    .navbar-inverse .navbar-link:hover {
    color: #fff;
    }
    .navbar-inverse .btn-link {
    color: #9d9d9d;
    }
    .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link:focus {
    color: #fff;
    }
    .navbar-inverse .btn-link[disabled]:hover,
    fieldset[disabled] .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-inverse .btn-link:focus {
    color: #444;
    }

    /* For mobile view */
    @media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
    }
    }

Viewing 3 posts - 1 through 3 (of 3 total)

  • You must be logged in to reply to this topic.