Top menu background on mobile (for white logo)

- 8 years, 8 months ago Vaitrucci
  Participant
  
  Expired
  
  Hi — the theme is great and we’ve pretty much got everything in order the way we want. The one quirk for us is on mobile. We have a white logo, so it’s not really displaying well on mobile because the menu background is also white.
  
  Is there something we can put in our custom CSS box to add a simple background on the menu, so our menu would look similar to what’s on the desktop version? It doesn’t even need a gradient; a solid color would be fine.
  
  Our site is http://www.sowhatkc.com, if it would help you to check it out.
  
  Thanks so much!
- 8 years, 8 months ago Vaitrucci
  Participant
  
  Expired
  
  Or, if I’m missing a setting somewhere, please let met know — apologies if I have. Thanks!
- 8 years, 8 months ago Mirela
  Participant
  Hello,
  
  To change the mobile header background color, please add this code into your custom css box:
  
  @media (max-width: 767px){ .header_transparency header#header { background-color: rgba(34,34,34,0.43) !important; }}
  
  Best regards!
- 8 years, 8 months ago Vaitrucci
  Participant
  
  Expired
  
  This is perfect! Thanks so much for the quick reply — this is exactly what we needed.
  
  It did raise one other quirk though, which I imagine is fixable. The menu does cover up a bit of the copy on the actual page, which you can see in the image below. This also happens when the hamburger menu is selected (it expands down and covers up more of the page, plus makes the menu items hard to read). Is there a padding setting or something I can add into the CSS box to fix these issues? I think once we have that settled, we’re good to go!
  
  I appreciate the great support! Thanks again.
- 8 years, 8 months ago Mirela
  Participant
  Hello,
  
  Yes, please add this code:
  
  @media (max-width: 767px){ .top_wrapper { padding-top: 100px;} .menu-small ul.menu > li > a { color: #fff !important;} }
  
  Let us know if you need further help.
  
  Best regards!
- 8 years, 8 months ago Vaitrucci
  Participant
  
  Expired
  
  That does help in making the hamburger menu text white, but the text on the page is still behind the menu (as seen above in the photo I posted). Is there a way to make sure the page text starts below the menu header?
  
  Sorry if I’m being a hassle — just trying to figure out this one last detail.
  
  Thanks again!
- 8 years, 8 months ago Mirela
  Participant
  
  Hello,
  
  Yes, this line: .top_wrapper { padding-top: 100px;} in the above code does that. Please edit it to this: .top_wrapper { padding-top: 100px !important;} Now the page text should start below the header (screenshot).
  Let us know.
  
  Best regards!
- 8 years, 8 months ago Vaitrucci
  Participant
  
  Expired
  
  Perfect! That took care of the issue.
  
  Thanks so much for the great support — much appreciated!

Viewing 7 reply threads

You must be logged in to reply to this topic.

Community Forums

Top menu background on mobile (for white logo)

Site Links

Useful Articles

Login