Black bar on mobile mode

[felixodeli]

Hello,

Please help me on how to get rid of the black bar under logo and menu in mobile mode. Please the attached picture

[Laura]

Hello, do you want to make it transparent? Please send me an url 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[felixodeli]

Yes please. If transparent will make it not seen.
http://www.linkingwinners.com

[Laura]

Hello, please add this css to Quick CSS found in General Settings

@media (max-width: 991px) {
.kleo-main-header, .navbar-transparent .kleo-main-header, .kleo-navbar-fixed.navbar-transparent #header {
  position: absolute !important;
  top: auto!important;
  background-color: transparent;
}
.kleo-main-header .navbar-toggle {
  display: inline-block;
  margin-right: 20px !important;
}
.logo img {
  height: auto;
  width: 20%;
}
}
 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[felixodeli]

Thanks.
That was very helpful. I turn the transparent to light gray, so that the menu sign will be visible

[zafari]

I have the same black bar issue on my mobile site. When I can get it to change to white, the hamburger menu is invisible. Why isn’t there a way to easily control the mobile menu colors in the new update? I have used Raju’s CSS Quick Fix but it is not working. Where can I easily modify the header background color please?

[zafari]

To followup, the issue is only on my home page. The other site pages do work.

[Laura]

Hello zafari, could you share a link to your homepage? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[zafari]

Sure, here it is:

http://originalgirlfriendsnetwork.com.php53-17.dfw1-2.websitetestlink.com/

Thanks for looking into this.

[Laura]

Hello, what color would you like? i used one of your slider

COPY CODE

@media (max-width: 991px) {
.kleo-main-header, .navbar-transparent .kleo-main-header, .kleo-navbar-fixed.navbar-transparent #header {
  position: relative!important;
  top: auto!important;
  background-color: #C5B8E6;
}
section.container-wrap.alternate-color.ov-hidden.border-bottom.text-center {
  margin-top: -15px;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[zafari]

HEllo – thanks for the suggestion. However, it’s not working. I placed it in the child theme’s CSS file but the mobile header bar is still black, as you can see in the attached screenshot. Any other ideas?

[zafari]

Hello = as a followup to my earlier reply, when I place the code in the Quick CSS field in Theme Options>General, it does work if I add !important on the background color field. However, the hamburger bars do not show up. I added more CSS to get them to appear so that works now. However, the drop-down menu colors are now not working. I wanted my background to be white, but the menu is then white on white so it’s not working. How can I change the text color of the drop-down menu items?

[Laura]

Hello, please try with:

@media (max-width: 991px) {
.kleo-main-header, .navbar-transparent .kleo-main-header, .kleo-navbar-fixed.navbar-transparent #header {
  position: relative!important;
  top: auto!important;
  background-color: #FFF !important;
}
.navbar-toggle {
  position: relative;
  float: none;
  padding: 9px 10px;
  margin-top: 0;
  margin-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.49) !important;
  border-radius: 4px;
}
ul#menu-main a {
  color: black !important;
}
.navbar-transparent #ajax_searchform {
  background-color: rgba(34, 34, 34, 0.06);
}
}
 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[zafari]

Hello Laura,

Thanks! That worked! Many thanks for your help….

🙂

[Laura]

Hello, i’m glad it worked 🙂 Please give us a nice comment and/or a 5 star rating at themeforest 😀

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts