I am having an issue with my bootstrap 3 dropdown menu, specifically when its on the hamburger version of the menu. The following actions are happening:
Once a menu item is selected, all items in the ul remain highlighted, the next time you open the menu.
When the page is viewed on a mobile device, the menu doesnt disappear once a menu item is selected.
I have tried a couple of different scripts, similar to this Github topic but I thinks I am placing the script in the wrong place. I have made a few different changes to try get it to work but I cant figure it out. I have taken the source from w3schools topic.
Any help would be greatly appreciated to fix this issue.
Thanks in advance.
Here is the navbar code I am using:
<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 navbar-fixed-top" id="myNavBar">
<div class="container">
<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 href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Had to add some jQuery to it, and it worked.
Will make slideUp transition smoother as soon as I get the chance.
Just adding and removing few classed worked.
And on toggle, you get the removed classes back. So not to worry about that.
Place the below code in your html before your <html>
<script>
JqUery text
</script>
$(".dropdown-menu").click(function() {
$(".navbar-collapse").removeClass("in");
$(".navbar-toggle").addClass("collapsed");
});
<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 navbar-fixed-top" id="myNavBar">
<div class="container">
<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 href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Related
<div id="navarea">
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav custom_nav">
<li class="">Home</li>
<li class="dropdown"> Dropdown
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Store</li>
<li>Media</li>
<li>Partners</li>
</ul>
</div>
</div>
</nav>
I'm migrating an older website to Bootstrap 4 beta and I've somehow destroyed the navbar in the process. I'm fairly confident it has something to do with the change in "toggle" and "expand" but I've been playing with it for several hours with no success.
The navbar should display at the top of the page, as an average navbar. Instead I have a tiny box in the top left corner that expands the menu.
The bootstrap 3 navbar can't be copied and pasted into bootstrap 4. You'll need to do some work to recreate the menu to your liking.
This is an example menu for bootstrap 4 for reference.
<nav class="navbar navbar-expand-lg navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Store</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Partners</a>
</li>
</ul>
</div>
I'd recommend going to the below URL and checking out the example navbars to understand how they work in Bootstrap 4.
https://getbootstrap.com/docs/4.0/examples/
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>
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
So, I'm brand new to all of this. This is my first ever actual project with HTML/CSS, so please keep that in mind. Constructive criticism is always welcome, as it will only help me become better.
Now that that's out of the way, my issue:
So, I'm using Bootstrap because it's easy to use and from my experience so far is somewhat user friendly. I can't for the lift of me however figure out how to move my dropdown button to the right-hand side of my navbar.
Here's the code for my navbar (again, sorry if it's trash. New to this):
<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<a class="navbar-brand" href="">AVC Gaming</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
</div>
If you want, there is a live version here: http://www.avc-gaming.us/avc
I've tried adding "pull-right" to the UK 111 dropdown <ul> but that didn't do anything. When I added "pull-right" to the Donate button, all it did was swap places with the UK 111 dropdown.
Any ideas?
The pull-right works like it should. But because the width of ul.nav navbar-nav is just taking up the space of it's content it's not working like you want. If you'll put a width of for example 90% on ul.nav navbar-nav you will see it aligns right.
You can just add bootstrap's own class pull-right. I have a example here!
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid pull-right">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
You have to move <li> of UK 111 to separate <ul> and add 'pull-right' class to it along with other classes that you are using for styling your list.
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
If you want to move All of them to the right of the page put Float:right in line <ul class="nav navbar-nav"> like so:
<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<a class="navbar-brand" href="">AVC Gaming</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" style="float:right">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
</div>
OR
If you want to move just the last one then set Width:96% on line <ul class="nav navbar-nav"> and float:Right on your last dropdownlist <li class="dropdown">
<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<a class="navbar-brand" href="">AVC Gaming</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" style="Width:96%">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
<li class="dropdown" style="Float:right">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
</div>
Bootstrap 3 provides this functionality. Please refer to the Docs for a complete example and specifically for right aligned links: Component Alignment
About Pull-right and Navbars
Align nav links, forms, buttons, or text, using the .navbar-left or
.navbar-right utility classes. Both classes will add a CSS float in
the specified direction. For example, to align nav links, put them in
a separate <ul> with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but
they're scoped to media queries for easier handling of navbar
components across device sizes.
Component Alignment
Right aligning multiple components Navbars currently have a limitation
with multiple .navbar-right classes. To properly space content, we use
negative margin on the last .navbar-right element. When there are
multiple elements using that class, these margins don't work as
intended.
See complete working example Snippet at FullPage.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<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="">AVC Gaming</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu">
<li>Ban Appeal
</li>
<li>Registration
</li>
</ul>
</li>
<li class="button">Donate
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums
</li>
<li>Arma 2
</li>
<li>Arma 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I have a navbar in a desktop site, but I want it in mobilesite like a sidebar.
How to convert the navbar to sidebar in the mobile site?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Site name
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home">Home <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>page 1</li>
<li>page 2</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>username</li>
</ul>
</div>
</div>
</div>