Menu
im having issues with my bootstrap responsive background.
as seen below, when my window is reduced to simulate a mobile screen size, my dropdown becomes transparent.
this is my code, which was copied from the bootstrap sample websites, the only change i made was the links.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Dashboard</a></li>
<li><a href="#pages">Pages</a></li>
<li><a href="#extensions">Extensions</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<div class="navbar-right">
<p style="color:#fff;">some text</p>
</div>
</div><!--/.navbar-collapse -->
</div>
</div>
[EDIT] i have this in my header
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
824
How to remove opacity or transparency from sticky navigation/menu bar. If you want to remove the opacity or transparency from the sticky navigation bar, just navigate to Theme Options -> General -> Additional CSS and copy/paste this code and save changes.
Now the Bootstrap 4 navbar breakpoint can be changed using the navbar-toggleable-* classes. Use the hidden-* utility classes to show/hide the toggle button. For example, here's a navbar that collapse at the small screen (sm) breakpoint of 768 pixels. Notice the navbar-toggleable-sm class in the collapsing DIV.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. This event fires immediately when the show instance method is called. This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
It is hidden and shows the content when the user wants. A collapse navigation bar in bootstrap is the combination of collapse in the Navbar. Navbar content can hide and show according to the requirement of the user using collapse Navbar. Bootstrap Collapse Navbar becomes a responsive navigation bar for screen size.
Using different classes, tags and attributes developers can create more attractive Navbar. Navigation bar (Navbar) is a header or index of the web application. It is always placed on top of the web page. <br> The collapse in bootstrap is used for space-saving of large content. It is hidden and shows the content when the user wants.
Creating a transparent navbar is very easy - just don't add a color class .bg-* to the navbar. In this case, the Navbar will take the color of the parent's background color. You can achieve a very impressive effect by using our animated navbar, which is transparent on start, and change the color after the scroll.
This means that the initial height of the sidebar will be at least equal to the screen height. Also, its height will increase when the page content would increase. Just a little touch to the Bootstrap 4 drop-downs. We are using standard Bootstrap 4 class .dropdown-toggle. This class adds a small triangle next to the drop-down links.
This happens when you lock the navbar's height. Check CSS and change:
height: 50px;
into this:
min-height: 50px;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
