Mobile Menu

houarim
Offline
Last seen: 4 months 1 week ago
Thu, 09/17/2015 - 21:49
#1
Mobile Menu

Hi,

I am making some responsive adjustments to my website: www.icb.ma , adding some padding and margins, removing some items so they don't display in the mobile version.

Question:

How do we control the color of the mobile menu (the hamburger stack, the three bars), I need to have it always in red, otherwise we don''t see it.

Thank you,

cindy
cindy's picture
Offline
Last seen: 3 days 9 hours ago
Fri, 09/18/2015 - 10:33

Hi,

Please open file style.css, insert the following code: 

#header .open-nav span,
#header .open-nav:before,
#header .open-nav:after {
background-color: #f00 !important;
}

#f00: the color which you would like to use for your mobile menu (for example)

houarim
Offline
Last seen: 4 months 1 week ago
Fri, 09/18/2015 - 18:10

Thank you so much Cindy, you're always good at solving problems. However, with the menu-top, the logo-nav gets in the way... I am not sure what to do, try it:   www.icb.ma on a mobile phone, you'll see that the logo is sharing the space with the open mobile menu and prevents me from clicking on it, it clicks on the logo-nav and it reloads the page. I tried this:

@media screen and (max-height: 920px) {
  .logo-nav {
  display: none;
  }
}

And the same for max-height 880px, 840px, all the way down to 600px  (I am using an iphone 5)  But it still shows up in the mobile menu!

logo-nav mobile menu


Maybe I made a mistake in the responsive CSS, I wrote display:none but it still displays it. Please help... I am almost finished with this project.

Thank you very much and have a great day!

cindy
cindy's picture
Offline
Last seen: 3 days 9 hours ago
Sat, 09/19/2015 - 10:11

Please delete your code and replace by:

@media screen and (max-height: 700px) {
.navigation.nav-fullscreen .logo-nav {
display: none;
}
}

Log in or register to post comments