Okay
  Public Ticket #1239826
hamburguer mobile menu color
Closed

Comments

  • Consi started the conversation

    Hi,

    i´ve changed the color of the hamburguer menu with the following css but on mobile I see 2 black lines, and my pink color. Can you please help me, I need the 3 lines in pink.

    This is the code:


    /*------------------------------
    =HAMBURGER MENU
    ------------------------------*/

    #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines, #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines:before, #header-outer.transparent .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.dark header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:before, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines:before, #header-outer.transparent .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a i.lines:after, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:after, #header-outer.transparent.directional-nav-effect .midnightHeader.default header#top nav ul .slide-out-widget-area-toggle a span.light .lines-button i:before, #header-outer.transparent .midnightHeader.dark .slide-out-widget-area-toggle[data-icon-animation="simple-transform"] .lines-button:after, #header-outer.transparent .midnightHeader.default .slide-out-widget-area-toggle[data-icon-animation="simple-transform"] .lines-button:after {
        background-color: #e5366e !important;
    }

    /*------------------------------
    =HAMBURGER MENU MOBILE
    ------------------------------*/

    .midnightHeader.dark .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, 
    .midnightHeader.dark .slide-out-widget-area-toggle.mobile-icon  .lines-button.x2 .lines:after,
    .midnightHeader.dark .slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines-button:after, 
    .midnightHeader.dark header#top .slide-out-widget-area-toggle[data-icon-animation="spin-and-transform"].mobile-icon .lines-button.x2 .lines,
    .midnightHeader.default .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, 
    .midnightHeader.default .slide-out-widget-area-toggle.mobile-icon  .lines-button.x2 .lines:after,
    .midnightHeader.default .slide-out-widget-area-toggle[data-icon-animation="simple-transform"].mobile-icon .lines-button:after, 
    .midnightHeader.default header#top .slide-out-widget-area-toggle[data-icon-animation="spin-and-transform"].mobile-icon .lines-button.x2 .lines {
    background-color: #e5366e !important;
    }

    http://www.delamoncircus.com

    The password to access the site is:fedora


    thank  you



  •  9,012
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    .midnightHeader.dark header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, .midnightHeader.dark header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after, .midnightHeader.default header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before, .midnightHeader.default header#top .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:after {
        background-color: #e5366e !important
    }

    Thanks


    ThemeNectar Support Team