Currently, it appears that V4 has no documentation on using navbar dropdowns. Following the the V3 docs, the navbar on V4 does drop down on click, but appears to be unstyled. How can I get the dropdown to appear properly as shown in the V3 docs? I'm assuming that the css selector has changed; if that's the case, how would I go about finding the new undocumented selector?
This is what it currently looks like with V3 classes on the V4 library:
The HTML used:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="/">HelloWorld</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">3<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Test</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><a class="nav-link" href="">Logout </a></li>
</ul>
</nav>
</body>
</html>
You are using
<li> and <ul> whereas the documentation suggests to use <div> and <a> tags instead
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Edit: Fiddle for reference
Edit2: Ok so u missed the classes btn and btn-success. Also add css rule
.dropdown { display:inline-block;}
Edit3: Fiddle Link: Dropdown 1 with <a> instead of <button>
Try below:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
<a class="navbar-brand" href="/">HelloWorld</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
1<span class="caret"></span>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
2<span class="caret"></span>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="dropdown">
3<span class="caret"></span>
<ul class="dropdown-menu">
<li>Map</li>
<li>Grid</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Test</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><a class="nav-link" href="">Logout </a></li>
</ul>
</div>
</div>
Working Plnkr: Plnkr
Related
How to make this bootstrap 'Navbar' straight, I've tried using different navbar classes but couldn't get it straight, please help me out. Snapshot of the web-page given here web-page snapshot
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>>Bootstrap Practice</title>
</head>
<body>
<!-- Navbars -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
Coldplay
</div>
<ul class="nav navbar-nav">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
</div>
</nav>
</body>
</html>
The default behavior of navbar-nav is
flex-direction: column;
Set a class in the html
<ul class="nav navbar-nav navigation-bar-row">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
Then in your css:
.navigation-bar-row {
flex-direction: row;
}
If you're lazy like me, skip everything above and just do:
<ul class="nav navbar-nav" style="flex-direction: row;">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
Edit: The commenter below me has it right. The best thing to do is add "d-flex flew-row" to the ul class list.
The Bootstrap Navbar docs have a working example that you can copy and paste, substituting in your own values as needed.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
There are classes set in Bootstrap 4 that will shift the 'horizontal' nav to a vertical nav. Both being straight.
(function(){
var menuToggle = $('#menu-toggle');
menuToggle.click(function(){
menuToggle.next().toggleClass('d-sm-block');
menuToggle.next().toggleClass('d-none');
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-light">
<!-- PUT A BUTTON HERE THAT ON CLICK WILL SHOW HIDE THE NAV -->
<button id="menu-toggle" class="d-block d-md-none">Menu *burger icon*</button>
<ul class="navbar-nav d-none d-md-inline-flex">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>
You can put a button in there too, to toggle the nav. Again using Bootstrap classes.
I don't have too long so this is as far as I got.
I would like to make a dropdown in my black navbar, However when I try this the color of the text is blue and if I click it the background of the popu is white and interferes with my black background, So I would like to make it transparent. Using bootstrap v4.1.1
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<a className="navbar-brand" href="/home">home</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"/>
</button>
<div className="collapse navbar-collapse" id="navbarColor01">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<a className="nav-link" href="/user">Users</a>
</li>
<li className="nav-item" >
<li className="dropdown nav-link">
<a className="dropdown-toggle" data-toggle="dropdown" href="#">Create new
</a>
<ul className="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</li>
</ul>
</div>
</nav>
So the "create new" has to be white and the page links have to be white as well. When I click on the create new the bow with the pages in it has to be transparent.
How would I do achieve this?
I have tried to put this in my css :
.dropdown a{
color: rgba(255,255,255,.5);
}
But when I do this it works however now the pages won't show up when I click on it, I just get a white box.
Thx
Use the bg-dark class on the dropdown. Also you'll want to use nav-link for the "Create new" link so that it's light like all the other links for navbar-dark.
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="/home">home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/user">Users</a>
</li>
<li class="nav-item">
</li>
<li class="dropdown">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Create new
</a>
<ul class="dropdown-menu bg-dark">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/VKvvHSVl98
You can replace your code with my code start doing css everything going to work nicely
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/user">Users</a>
</li>
<ul class="nav-item" >
<li class="dropdown nav-link">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Create new
</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</ul>
</div>
I have a nav bar with 3 li items. I have a forth item that I would like to align along the extreme left side of the bar. When I add the forth item as a div within the nav bar, the 3 li items are skewed to the right. I'm using bootstrap to style the nav bar. Here is the markup:
<nav class="navbar navbar-toggleable-md navbar-inverse">
<ul class="navbar-nav">
<li style="float: left; color: white">
My Text Here
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</ul>
</nav>
I've tried applying sone styles the forth item, but they have no affect. Any pointers?
You can take your first item out of the ul and put it inside an element with the navbar-brand class which auto pulls to the far left and styles the text so it is noticeable. You can also use the classes navbar-left and navbar-right to pull elements to the left or right.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-inverse">
<div class="container">
<div class="navbar-header navbar-left">
<p class="navbar-brand">My Text Here</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</ul>
</div>
</nav>
I recommend you to use standards that bootstrap provide. Always you can customize adding some classes. As you see I have add the brand to your nav, I think it was what you looking for.
Check the second nav, you can see there more usefull classes. (Check it snippet on full page).
Check the third nav is how to add your logo as an img.
.this-is-my-brand {
height:100%;
margin:10px;
font-family:Verdana;
text-shadow:1px 1px 1px #fa8911;
}
.logo{
width:25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse">
<ul class="navbar-nav">
<a class="navbar-brand this-is-my-brand" href="#">Brand</a>
<li style="float: left; color: white">
My Text Here
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a>
</li>
</li>
</ul>
</nav>
<nav class="navbar navbar-default">
<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="#bs-example-navbar-collapse-1" 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="logo" alt="Brand" src="https://i.stack.imgur.com/MybMA.png">
</a>
</div>
</div>
</nav>
Would it be possible using css bootstrap to recreate this style of menu I am using bootstrap and so far I have the top bar just with the two tabs and drop downs. I also see to show a drop down as in the administrator link you see and also a settings cog.
The blue icons buttons shoud be drop downs till the last item. I have posted my initial code on pastbin as the editor here was turning them into elements. Can someone advise me on how to stop that from hapening.
Code
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Cassed Dimensions Portal</li>
<li>Configruation Items</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
I am trying to include an icon in a drop down menu. The icon is causing the menu to be rendered incorrectly (it appears the icon is being repeated on the menu bar and the menu).
snippet:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-off">Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Any idea what is causing this?
You need to close your tag.
<i class="icon-off"></i>
This worked for me
<li> <i class="icon-off"> </i> Sign Out </li>