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
Related
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"/>
I want to achieve html layout something like this, using Twitter bootstrap
i want it to be responsive, in both mode, desktop and mobile, like example below
desktop mode
mobile mode
This is code I tried so far
<!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>
<header>
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://i.stack.imgur.com/G2Xgp.png">
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>FR</a></li>
<li><a href='#'>EN</a></li>
<li><a href='#'>KR</a></li>
</ul>
</div>
<!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right" role="menu">
<li><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT US</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
</ul>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
Any help appreciated
try this...! may be this will help you..! i have added some custom css in head, take a look..!
<!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>
<style>
.navbar{
background: #540d1f;
padding: 25px 0;
}
.container-fluid{
background:#bcaa60 !important;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-brand{
position: relative;
top: -45px;
}
#media only screen and (max-width: 767px) {
.navbar-brand{
position: relative;
top: -45px;
left:30%;
}
}
</style>
</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="#">
<img width="90px" src="https://i.stack.imgur.com/G2Xgp.png">
</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>
</body>
</html>
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.
I have tried to find the issue, but nothing works for me.
If I am resizing the browser the hamburger menu wil pop up and work, but when I take a look on my phone it doesn't work.
Did I really do something wrong?
The code I am using:
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<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 class="navbar-brand" href="#">Roy van Eerden</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Over</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You can see it live at: www.royvaneerden.com/
Screenshot of the phone example:
Just Place jquery.js above bootstrap.min.js
also, add meta in head
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Check here
just add this meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You are missing the whole html part, please replace what you have with the nav from here(w3school Documentation).
<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>
or by checking the link Collapse Menu Bootstrap
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