Navigation
Archive / "flat" hamburger button styling
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • September 20, 2016 at 3:47 pm #1183696
    alisonglass
    Participant

    I would like to style my hamburger button to be flat, without the shading on mobile and tablet sizes. I tried to figure out its class name but could not. My site is alisonglass.com
    Thanks!
    Jessica

    September 20, 2016 at 5:21 pm #1183779
    Nabeel A
    Moderator

    Hi Jessica,

    Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

    .x-btn-navbar {
    box-shadow: none !important;
}

    Let us know how this goes!

    September 21, 2016 at 4:35 pm #1185447
    alisonglass
    Participant

    This worked great! Thanks! One more question is there away to change the color of it to match my typography? My type is currently #333.

    -Jessica

    September 21, 2016 at 10:17 pm #1185871
    Rue Nel
    Moderator

    Hello There,

    Thanks for the updates! To change the color, please use this code:

    .x-btn-navbar, 
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover {
    color: #333;
}

    Hope this helps. Kindly let us know.

    September 29, 2016 at 1:04 pm #1196091
    alisonglass
    Participant

    This was AWESOME!!! Thank you!

    September 29, 2016 at 1:09 pm #1196104
    Prasant Rai
    Moderator

    You are most welcome. 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1183696 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>