Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 23, 2018 at 6:45 pm #901606
    chrishilli

    Hi Community!

    I´m just trying to change the color off the burger menu (lines NOT text) on some pages.
    I already managed to get 2 different background colors for the header and 3 different logos (via child theme functions.php) depending on the site.
    I also put some css into quickcss to get a white burger menu if the header background is black.
    On the other links, if header background is white, the burger menu only shows one line! Sure, because my css overrides the standard color.

    How can i get this to done?

    Link to the site is: http://wordpress.p443147.webspaceconfig.de/
    (maislinger works, klaus not – klaus is the standard from the enfold child theme backend)

    This is my quickcss code:

    .page-id-28 .header_bg {background-color: #000000;}
.page-id-30 .header_bg {background-color: #000000;}
.page-id-32 .header_bg {background-color: #000000;}
.page-id-34 .header_bg {background-color: #000000;}
.page-id-37 .header_bg {background-color: #000000;}

#header_main {border-bottom:1px solid #000000!important;}

.page-id-28 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff;
}
.page-id-30 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff;
}
.page-id-32 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff;
}
.page-id-34 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff;
}
.page-id-37 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff;
}
    January 25, 2018 at 6:30 am #902608
    John Torvik

    Hey chrishilli,

    You can add the !important property after the CSS rules and check if this is working.

    Best regards,
    John Torvik

    January 25, 2018 at 9:18 am #902688
    chrishilli

    Unfortunately this didn´t do the trick!
    On the white header background two lines of the burger icon are still white. I´m sure that is because my quick css overrides the standard css.
    I can´t figure out why only the middle line keeps black?

    In the above code i added important and tried to give page family (ID 43) an additional styling with black burger icon lines. Did not work!

    .page-id-28 .header_bg {background-color: #000000!important;}
.page-id-30 .header_bg {background-color: #000000!important;}
.page-id-32 .header_bg {background-color: #000000!important;}
.page-id-34 .header_bg {background-color: #000000!important;}
.page-id-37 .header_bg {background-color: #000000!important;}

#header_main {border-bottom:1px solid #000000!important;}

.page-id-43 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #000000!important;
}

.page-id-28 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff!important;
}
.page-id-30 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff!important;
}
.page-id-32 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff!important;
}
.page-id-34 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff!important;
}
.page-id-37 .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff!important;
}
    January 25, 2018 at 10:03 am #902706
    chrishilli

    Found it out!

    There were missing ID´s in the css code.
    It should be like this:

    <strong>.page-id-28</strong> .header_color .av-hamburger-inner, <strong>.page-id-28</strong> .header_color .av-hamburger-inner::before, <strong>.page-id-28</strong> .header_color .av-hamburger-inner::after {
    background-color: #ffffff!important;
}

    Topic can be closed!

    January 25, 2018 at 10:32 am #902729
    Nikko

    Hi,

    Glad that you figured it out! Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘burger menu line color on different pages’ is closed to new replies.