Premium Theme Support › CSSIgniter › Olsen

Dropdown Menu for Smaller Screens

  • Author
    Posts
  • #163128
    staceyboulter
    Member

    Hello,

    When my website is displayed on a smaller screen, the primary navigation menu becomes a dropdown menu, which is fine, I currently have it centered using this custom CSS:


    @media    (max-width:991px) {
    .menu-toggle,
    .main-navigation.toggled > div > ul {
    display: block;
    margin: 15px auto;
    }

    .main-navigation {
    text-align: center;
    }
    }

    What I would like to change though is the colour of the button. By default it’s gold and when hovered/clicked it’s black. I would like it to be a different colour, one solid colour, no changing when hovered/clicked. I’d like it to just be: #b8d4e3 (with the text being white).

    If you could help me with some custom CSS it would be greatly appreciated.

    Thanks,
    Stacey

    #163139
    fotispapafotiou
    Theme Author

    Hi,
    add this

    .menu-toggle{
background:#b8d4e3!important;
}

    in your custom CSS box under Customize-▸Additional CSS

    Let me know if this worked for you.

    #163161
    staceyboulter
    Member
    Original poster

    It worked great. Thank you so much.

    #163162
    fotispapafotiou
    Theme Author

    Glad I could help!

  • The topic ‘Dropdown Menu for Smaller Screens’ is closed to new replies.