one menu bar hiding under another after minimizing - html

I make two navbars but it doesnt work correctly. Do you have any advices ? It looks like this, but after minimizing I am missing HOME MIBs and LIBRARY tabs. I think that upper menu covers bottom menu.
I would like to be able to see all tabs after clicking on the menu button.
Here is my code
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<title>my site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
}
#media only screen and (max-width: 550px) {
body {
padding-top: 0px;
}
.navbar-fixed-top {position:static;}
.navbar{margin-bottom:0;}
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<div class="navbar-header"><a class="navbar-brand" href="#">LOGO</a></div>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse1" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse1">
<ul class="nav navbar-nav pull-right">
<li>Friends</li>
<li>Messages</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Stats</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-target=".navbar-collapse2" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-collapse2">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">MIB's <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>my MIB's</li>
<li>my feedback's</li>
<li>my comment's</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Library <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Standard</li>
<li>Random</li>
<li>Custom</li>
</ul>
</li>
<li>Badges</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Help <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Use this. it is working perfact

Related

Problem with dropdown bootstrap not showing up properly

The items of the dropdown menu are not displaying properly.What should I do ? The website is working good on the mobile phone(the nav part) but on the pc it's crappy. Code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="butonuldinnav" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">A
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>B</li>
<li>C</li>
</ul>
<li>X</li>
<li>Y</li>
</ul>
</div>
</div>
</nav>
ORDER
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'styles.css' %}">
Images :
problem
if I scroll down

Try:
<nav class="navbar-inverse navbar-nav navbar-header">
<div id="butonuldinnav" data-bs-toggle="collapse" data-bs-target="#myNavbar">
<i class="fa fa-bars"></i>
</div>
<ul class="collapse navbar-nav" id="myNavbar">
<li><a class="dropdown-toggle" href="#" data-bs-toggle='collapse' aria-expanded='false' data-bs-target='#A'>
A <i class="caret"></i></a>
<ul id='A' class="collapse">
<li>sub-1</li>
<li>sub-2</li>
</ul>
</li>
<li>B</li>
<li>C</li>
</ul>
</nav>
Links and script:
<link href='https://bootstrap.min.css' rel='stylesheet' />
<script src='https://bootstrap.bundle.min.js'/>
<link href="https://font-awesome.min.css" rel="stylesheet"/>

using font awesome icons-navbar wont collapse

I am new to using bootstrap,I am trying to add a user icon that should collapse when a user clicks on it. when i try to add navbar-toggle to a class the user icon item disappears.If i remove it the icon appears but when i click on the icon it doesn't collapse.
what am i doing wrong? how do i get the icon to "open/collapse"
<div class="navbar navbar-default navbar-inverse visible-sm" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand collapsed" data-toggle="collapse" data-target="#navbar-collapse-account" ><i class="fa fa-user" aria-hidden="true"></i></a> // i tried adding the class as "navbar-brand pull right navbar-toggle collapsed" but when i do this the user icon disappears
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-account" data-text="Login" data-class="login"> // this part doesn't open
</div>
</div>
</div>
</div>

Hope this helps...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
source: w3schools.com

How to align right accounts:ui loginButtons in Bootstrap Navbar?

I'm trying to get accounts:ui loginButtons to right align in a Bootstrap Navbar. Functionality is fine, but no matter what I try, it won't go on the right. Currently, it's on the left after the Upload button. Any help appreciated.
html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">REVUME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CATEGORIES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>DIGITAL ART</li>
<li>DRAWING</li>
<li>GRAPHIC DESIGN</li>
<li>ILLUSTRAION</li>
<li>PAINTING</li>
<li>PHOTOGRAPHY</li>
<li>UI/UX</li>
</ul>
</li>
<button type="button" class="btn btn-default navbar-btn">UPLOAD</button>
<span class="glyphicon glyphicon-user"></span> {{> loginButtons align="right"}}
</ul>
</div>
</div>
</nav>

Try this it will work:)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>
</head>
<style type="text/css">
#right-button {
margin-right: 20px;
}
#glyph {
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">REVUME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CATEGORIES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>DIGITAL ART</li>
<li>DRAWING</li>
<li>GRAPHIC DESIGN</li>
<li>ILLUSTRAION</li>
<li>PAINTING</li>
<li>PHOTOGRAPHY</li>
<li>UI/UX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><button id="right-button" type="button" class="btn btn-default navbar-btn navbar-right">UPLOAD</button></li>
<li>
<span id="glyph" class="glyphicon glyphicon-user" ></span> </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Use the class navbar-right with the element that you are trying to align at the right side.

Why my nav bar doesn't work?

I'm new in bootstrap.
I'm trying to configure my menu bar. I added this line of code into my header:
<meta name="viewport" content="width=device-width, initial-scale=1">
After that, I added this block of code in my view:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Inicio <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
</li>
<li>Pagina 2</li>
<li>Pagina 3</li>
</ul>
</div>
</nav>
This is what I want:
This is what I'm getting:
I want all items horizontally, not vertically...
Maybe this is very basic, but this is the first time that I'm using bootstrap.
Could you help me, please?

You are missing a few things in your code
See a basic demo from bootstrap itself here
Take a look at navbar docs
Here is a simple working snippet base on your code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<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 class="navbar-brand" href="#">WebSiteName</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Inicio <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Opcion 1
</li>
<li>Opcion 2
</li>
<li>Opcion 3
</li>
</ul>
</li>
<li>Pagina 2
</li>
<li>Pagina 3
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>

Bootstrap navbar collapse button not showing

I'm making an application with bootstrap and I have a nav bar, however for some reason when I resize the page the links disappear but the toggle button doesn't show.
Here is my nav bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">title</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
</nav>
Any help to fix this would be greatly appreciated.

You don't currently have the toggle button in your code. Try placing the following before your collapse, and after your navbar-header:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

you havent added a toggle button as i can see in your code
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">title</div>
</div>
For more details refer Navbar documentation (bootstrap)

in my case I am using bootstrap5 but class I was using old version, after changing code as below it worked for me by going though BS5 W2Schools:
<nav class="navbar navbar-expand-sm bg-dark">
<div class="container-fluid">
Recipe Book
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/recipes">Recipes</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/shopping-list">Shopping List</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown" appDropdown>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</nav>
referece:https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h