BlissSol BlissSol - 10 days ago 5
CSS Question

Navbar mobile display bugs

I'm brand new to developing with Angular/Bootstrap, and am currently developing a website for a Charity;

While my Navbar works perfect on a large (laptop/PC) display, when viewing thru a mobile (small screen) any menu item you hover over becomes transparent.

I know its obviously a CSS property, and im assuming its the hover property, but im not sure how to express it in my custom CSS.

Here's a screen capture to show what i meanenter image description here

I'm using the following CSS code to help format my Navbar..

.navbar-xs { min-height:65px; height: 65px; background-color: #ffffff; border: 0;}
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 20px;line-height: 35px; background-color: #ffffff;}
.navbar-xs .navbar-nav > li > a { padding-top: 15px; padding-bottom: 5px; line-height: 28px; color: #000fb5; background-color: #ffffff; }
body {
padding-top: 65px;
}


And here's a small sample of the HTML for the navbar (its a large menu, so i only included a sample)

<nav class="navbar navbar-xs navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/" class="pull-left"><img src="images/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">

<!-- Home Menu -->
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Home </b><span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li class="dropdown-submenu">
<a href="" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
<ul class="dropdown-menu">
<li><a href="#who">Who We Are</a></li>
<li><a href="#what">What We Do</a></li>
<li><a href="#why">Why We Do It</a></li>
<li><a href="#history">Our History</a></li>
</ul>
</li>
<li><a href="#news">Latest News</a></li>
<li><a href="#events">Coming Events</a></li>
<li><a href="#calendar">Calendar</a></li>
<li><a href="#ceo">CEO Message</a></li>
<li><a href="#bibleRead">Bible Reading</a></li>
<li><a href="#pray">Pray For Us</a></li>
</ul>
</li>


Otherwise, the website can presently be viewed here;
Current Website

Otherwise, my source can be viewed on my GitHub here;
GitHub source

And if anyone has any suggestions as to how else improve the site, I welcome feedback - as the charity wont provide me with any.

Answer

you need to add bgcolor to your dropdown nav

add below code this should work

@media (max-width: 767px){
  .navbar-nav .open .dropdown-menu {
        background-color: #e7e7e7!important;
  }
  .container>.navbar-collapse {
        background-color: #fff!important;
  }
}

enter image description here