I'm a beginner and I'm trying to create a navbar on bootstrap 4 that changes it's display on a mobile device
On a full-width display, I want the
Logo (left aligned)
Links (left aligned)
Profile picture dropdown menu (right aligned)
On a tablet display, I want the
Logo (centred)
Links (left-aligned and collapsed into hamburger menu)
Profile picture dropdown menu (right aligned) - essentially unchanged
I have managed to achieve most of what I want, except when clicking the hamburger menu, the profile picture menu gets pushed down, which is not what I want.
https://www.bootply.com/6a0BWZivYL
My question is, how do I fix the profile picture dropdown menu to the right-side.
I have tried moving the code for navbar-collapse collapse after the profile picture, which works for when in tablet display, but produces undesirable results in full-width display. Namely that it is no longer right-aligned.
I haven't been able to find any specific examples of this online. The closest I have found https://bootsnipp.com/snippets/gmQR0. This difference is that I don't think I need two collapsible menus, just the 1 collapsible + 1 fixed dropdown menu.
In the given design you have kept profile UL below the button div navigation list.
Please place it before button and change the class from float-md-right to float-right.
Add float-left class to button to make alignment left.
Edit
First design the nav-bar for small screen, then add media queries for dropdown-link to float right.
<head>
<style>
#media(min-width:769px){
.drop-class{
position: absolute;
right: 20px;
}
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNavDropdown" aria-
controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="dropdown drop-class">
<a class="dropdown-toggle" href="#"
id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<a class="dropdown-item" href="#">Something else
here</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
Related
In Bootstrap 4 within the toggler hamburger menu is active clicking it will show HomeAbout on the one line, not sure why these aren't on separate lines.
Code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Example
<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 flex-row ml-md-auto d-md-flex">
<li class="nav-item">
Home
</li>
<li class="nav-item dropdown">
About
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</li>
</ul>
</div>
</nav>
Fiddle: https://jsfiddle.net/StoogeMate/qts6gamk/
There's no obvious answer I've been able to find through using Bootstrap itself particularly for the first problem without overriding the .css itself and applying !important tags
Does Bootstrap have this capability?
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Remove dropdown from the About menu item
Wrap the About menu item in a div.btn-group
Use dropdown-menu-right on div.dropdown-menu
<li class="nav-item">
<div class="btn-group">
About
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Feedback</a>
</div>
</div>
</li>
🎁
Remove flex-row to show the menu items on two lines.
<ul class="navbar-nav ml-md-auto d-md-flex">
----
</ul>
On click in dropdown menu, dropdown box is exceeding the width of the page and showing the horizontal scroll.
Help me, How to make the dropdown box auto adjust the position if the right/left side is end of the page without scroll (as shown in figure below)?.
Demo: https://codepen.io/ramlals/pen/RmoGEx
I know it can be avoided by giving margin right to drop down menu but i need box to auto adjust position.The similar questions in stack related to dropdown menu/sizing but not dropdown-box.
My code (bootstrap navbar example)as follows:
<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 ml-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 w-100" 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>
</ul>
</div>
</nav>
Thanks in advance.
This is very easy you have already applied position: absolute to that div element. Now just add one more style in same element mentioned below:
left: -60px;
The whole code will look like this
#media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
left: -60px;
}
This will help.
When viewing this from xs or sm viewport/screen sizes, and then clicking on my navbar toggler, it's pushing all the content, INCLUDING the header that the navbar-toggler is in, down the page to make room for the dropdown menus.
This appears to be different from Bootstrap 3 (as well as Bootstrap 4 alpha 5).
Any thoughts on how to stop doing this?
Here's the site to test...
https://test.wrestlestat.com/rankings/dual
Here's the code:
<button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
#*<li class="nav-item"><a class="nav-link" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual Comparison</a></li>*#
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="comparisonDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="comparisonDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual/Team</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetWrestlerComparisonSelectLink()">Wrestler</a>
#*<div class="dropdown-divider"></div>*#
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Perma</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="rankingsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rankings
</a>
<div class="dropdown-menu" aria-labelledby="rankingsDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetWrestlerRankingsAllLink()">Wrestler</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetDualRankingsLink()">Dual</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetTournamentRankingsLink()">Tournament</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="fantasyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="fantasyDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.PickEmRoutes.GetFantasyThisWeekLink()">Pick'Em</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyPoolRoutes.GetTourneyPoolHubLink()">Tourney Pool</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyProjectionRoutes.GetTourneyProjectionLink()">Tourney Projection</a>
</div>
</li>
</ul>
</div>
Why it happens?
The class sticky-top gives your navbar a position: sticky; which acts as a block element when you haven't scrolled yet. So when your navbar gets expanded it pushes all other block elements down.
Fix1 - pushes normal content down
Put this div: <div class="navbar-collapse collapse" id="navbarSupportedContent" style>...</div> at the end of your <nav>...</nav>, or above your input if you want the searchfield to be under the collapsed navbar.
Fix2 - doesn't push anything down
First do Fix1, then in your CSS add .sticky-top { position: fixed !important; }, Only do this if your not using sticky-top anywere else!, because when you don't scroll it acts like a block element so pushes its other content down. Also add some margin to your first container-fluid so its under the header again (cause the now fixed element doesn't take up space anymore) for example add classes pt-5 and mt-5 to them.
Im using the bootstrap navbar and its working fine, on mobile devices the toggle button appears and when this button is clicked it appears a dropdown with the correct menu items, just like the bootstrap default.
But i want also to have a menu item with the username that appears when a user has a session started, and when this menu item is clicked it appears also a dropdown menu with the items available to a user with a session initiated.
The menu items available to a user with a session initiated are:
<ul>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
Do you know how to use the bootstrap to create that dropdown menu with the above items for the user with a session start? So that when the menu item "Jan" is clicked apperas a dropdown menu with the items above using the bootstrap styles just like when the toggle button in mobile device is clicked it appears the dropdown with the menu items?
Working example wihout that part of show the dropdown menu items available for a user with a session initiated working properly: https://jsfiddle.net/eeeoft8n/3/
Please see the bootstrap docs, there are some great examples there.
you'll want to add the add the div with the dropdown-menu class and the necessary aria-toggle on the link to activate them.
.menu_container {
position: relative;
width: 100%;
}
div.dropdown-menu{
left:auto;
right:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="container-fluid px-0">
<nav class="navbar navbar-expand-md navbar-light">
Logo
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="menu_container">
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto d-flex align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="#">Item 0</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> Jan
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Delete brains</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
you might need to go fullscreen in order to get the full-width view instead of the mobile view
I am not very adept at styling websites and have trouble with css and responsive design. As such, at the suggestion of a co-worker, I've decided to give the Bootstrap toolkit a try and so far I've been very happy with it. However, I am having trouble understanding a few things about the navbar components of the kit and so far have been unsuccessful in customizing this portion of the templates.
One of my sources of confusion stems from the pervasive inclusion of a toggleable button for collapsing the navigation bar. It seems like no matter what example they show of the navigation bar, they've included the collapse classes and toggle button, even where that button doesn't appear to be displayed anywhere and the navigation bar is not collapsed. For example, take a look at the following link: http://getbootstrap.com/examples/navbar-fixed-top/
If you view the source here, there you see the button and the collapse classes, but the navbar is missing said button and it is not collapsed. When I view the CSS I do see that it has display: none; specified, but then why include it at all?
<!-- Fixed navbar -->
<nav class="navbar navbar-default 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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Finally, I believe this issue is interrelated to the second issue I'm having, which is, I am trying to right justify the links of my customized navbar with the navbar-right class, but when I do so, the links don't move to the right. Does this have something to do with my removal of the toggle button and collapse classes? Here is my attempt which has failed miserably. I am using the base jumbotron template and have included the jumbotron and min bootstrap css files. The jumbotron css file is very minimal and only includes some body stylings for a margin and a color, I believe. I can't see where that would be preventing my navigation links from showing up on the side.
Instead, the image appears on the left, and the links appear just below it, with no styling whatsoever, just a jammed together list of links. The dropdown does not work because I was experimenting with a different method used on the angular site by specifying the uib-dropdown so I should mention that - the dropdown portion was working when I had the bootstrap classes and attributes specified.
For a jsfiddle example of what is happening when I attempt to get the links to show up on the right: https://jsfiddle.net/1jehsp5r/
In fact, I have yet to find a single working example of the right alignment in the navbar. I have re-done this code about 10 times now and not a single combination of classes and divs have yeilded a simple fixed top navigation bar with an element on the left and a set of links on the right. Take this tutorial for example: https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm - They have a screenshot of it working, but when you click the "try-it" button and it loads into an interactive screen, their OWN example doesn't even work right. Everything aligns on the left, which is exactly what I am experiencing.
Can anyone show me the right way of simply making a simple navigation bar similar to the one here: https://angularjs.org/
For the collapse button, it is set to appear in small screen for most of the cases. It's there for responsiveness (or the art of display well on all screen size).
Here is an example of collapse button : Bootstrap navbar external-content
To align items on the right side of the row, you could use the ml-auto (margin-left: auto;) class on the <ul> element.
Here is an example of a bootstrap navbar with links align on the right side.
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Hope it helps.
EDIT :
Those examples was build for Bootstrap 4 alpha 6.