Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 14, 2020 at 5:14 pm #1212981
    devynspirit

    I need to change the mobile menu background color, I’ve tried changing in general styling but can’t seem to figure it out. Can you help?

    May 14, 2020 at 9:23 pm #1213060
    Jordan Shannon

    Hey devynspirit,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    May 14, 2020 at 9:29 pm #1213065
    devynspirit

    Here you go…

    May 14, 2020 at 9:32 pm #1213070
    Jordan Shannon

    Hi,

    Add this to quick css:

    .av-burger-overlay-inner{
background:red!important;
}

    Best regards,
    Jordan Shannon

    May 14, 2020 at 9:45 pm #1213074
    docperi

    I’m not from support, but I think this can help. It’s usually the default color for the logo area in the settings.
    But there is another way …

    For overlay menu via css :

    .av-burger-overlay-bg {
    opacity: 0.8;
    background: #7f9ba3!important;
	}

    For normal mobile menu via css:

    .html_av-overlay-side #top .av-burger-overlay-scroll {
   background: #ffffff;
}

    Hope this helps

    May 14, 2020 at 10:07 pm #1213077
    devynspirit

    Thanks for sending that but it didn’t help :( The color in the default logo are is white but the background on the menu is actually brown, so I don’t think it’s that section that it’s picking up.

    • This reply was modified 4 years, 7 months ago by devynspirit.
    May 14, 2020 at 10:10 pm #1213078
    Jordan Shannon

    Hi,

    Neither worked?

    Best regards,
    Jordan Shannon

    May 14, 2020 at 10:12 pm #1213081
    devynspirit

    No, niether.

    May 14, 2020 at 10:14 pm #1213083
    Jordan Shannon

    Hi,

    Did you add my code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    May 15, 2020 at 1:40 pm #1213276
    docperi

    Without something to see it’s hard :)
    As I understood it, the background color has changed with Jordan’s code. That’s pretty good.
    The menu still needs to be colored. You are welcome to use CSS, from a page I once created.
    In action the CSS für the menu will look like this:

    Ihr Partner für Stahl und Umformtechnik: Mudersbach GmbH & Co. KG.

    (Switch to mobile view :))

    Here is the CSS for it. You have to adapt them for your needs.

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {
     font-size: 14px;
     border-bottom: 1px #ccc dotted!important;
	}

/* Overlay menu links */

#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a:hover {
	}

/* Active menu links */
  
#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li.current-menu-item a{
   color:#284596; 
   }
   
/* Submenu links */
.av-burger-overlay #av-burger-menu-ul .sub-menu a {
    line-height: 160%;
    background-color: #f7f7f8!important;
	}
  
#top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a:hover {
    border:none;
    }
    
    
.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    padding: 10px 15px 10px 20px;
	}
	
.html_av-overlay-side #top #wrap_all .av-burger-overlay li li a:before {
    font-family: 'entypo-fontello';
	font-size:16px;
	content: '\E879';

	float: left;
  	margin-right: 10px;
	}
	
	
.html_av-overlay-side #top #wrap_all .av-burger-overlay li li a {
    padding-left: 30px;
	}
	
/*Active Submenu*/

#top #header .sub-menu li.current-menu-item > a,
#top #header .sub-menu li.current-menu-item > a > .avia-menu-text {
    color:white!important;
    background:#1e3d7f!important;
    border:none;
    }

.html_av-submenu-hidden .av-submenu-indicator {
    padding: 1px 30px;
    font-size: 16px;
    opacity: 1;
    float: right;
    right: 0px;
}
    October 26, 2024 at 9:58 am #1469874
    SHR Design

    Hi

    To figure out the correct CSS I did the following:
    I made the desktop browser small so the Hamburger/mobile menu showed up. I right clicked the background color and selected Inspect (various browsers do something similar but might call it a little different from each other). In Inspect one can see the HTML and the CSS. I looked at the CSS and clicked into the code and added a color to see if that impacted the mobile menu. I end up using this code:

    @media only screen and (max-width: 989px) {
    #top #av-burger-menu-ul {
        vertical-align: top;
        background: orange !important;
    }
}
    October 26, 2024 at 4:40 pm #1469897
    Rikard

    Hi,

    Thanks for sharing SHR Design :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.