Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 16, 2018 at 9:43 pm #913397
    fulleffect256

    Hello,
    I’m trying to get a solid black background to the header menu on mobile. Right now on mobile, it just shows a floating hamburger menu with no background (transparent) that looks odd to me. How do I go about getting a solid background to the header on mobile? I appreciate your help, thank you!

    February 16, 2018 at 11:04 pm #913430
    Jordan Shannon

    Hey Firoze,

    Try adding the following to quick css:

    @media only screen and (max-width: 767px)  {
.av-burger-menu-main.menu-item-avia-special.av-small-burger-icon{
    background: #000;
    padding: 10px;
}

.av-hamburger-inner, .av-hamburger-inner::after, .av-hamburger-inner::before{
background-color:#fff!important;
}}

    Best regards,
    Jordan Shannon

    February 17, 2018 at 1:19 am #913458
    fulleffect256

    Thanks Jordan. Unfortunately that only added a background immediately surrounding the hamburger icon. I’m looking for a solid background that spans the entire header bar. Somehow I have achieved this on my other website http://www.truenaturemed.com , but I can’t figure out what the difference is.

    February 18, 2018 at 6:48 am #913762
    Victoria

    Hi fulleffect256,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .av-burger-menu-main.menu-item-avia-special.av-small-burger-icon {
    background: #000;
    padding: 20px;
  }
  .responsive #top #wrap_all #header {
    min-height: 40px;
 }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 18, 2018 at 7:45 pm #913992
    fulleffect256

    Thank you. I ended up solving it with this code:

    @media only screen and (max-width: 767px) {
    .av-burger-menu-main.menu-item-avia-special.av-small-burger-icon {
    margin-top:-15px;
    }
    .responsive #top #wrap_all #header {
    min-height: 55px;
    }
    }

    February 18, 2018 at 9:54 pm #914031
    Basilis

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Solid Background for Mobile Hamburger Menu?’ is closed to new replies.