I'm working on a simple project and trying to create a responsive navbar with hamburger menu, with the menu to the left when on devices with max-width at 480px. This is what I have so far and not sure what I'm doing wrong. I've tried targeting different classes within the navbar and dropdown, but nothing has worked. Sorry if I've posted wrong or wrong format. I'm still new to Stack and any help is always appreciated. Thank you!
HTML:
<nav>
<!--Navbar Start-->
<div class="container-fluid">
<div class="row">
<div class="col-12 border-bottom border-dark">
<div class="page-header text-center">
<h1>Genealogist</h1>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right" 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 class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!--Navbar End-->
CSS:
html, body {
overflow-x: hidden;
}
.dropdown {
}
img:hover {
transform: translateX(60px);
}
.form {
padding-top: 50px;
}
main {
background-color: lightblue;
border-bottom: solid black 2px;
background-size: cover;
}
.experience ul {
list-style-type: none;
}
/* Width Covers 0px-480px */
#media screen and (max-width: 480px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
/* Width Covers 481px-768px */
#media screen and (min-width: 768px) {
body {
}
}
/* Width Covers 769px-1025px (and greater) */
#media screen and (min-width: 1025px) {
body {
}
}
There is no requirement of media-queries here as bootstrap navbars are pretty responsive! You just need to make use of the right classes at the right places. Code-
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<div class = "container">
<br><h1 class="text-center">Genealogist</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler align-center" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Learn More</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</nav>
</div>
Related
Nav is changing site width. I don't know why's that.
I thought that's because margins or padding, but couldn't find any way to fix the problem.
I came to conclusion that is cousing problems, but I don't know why's that.
Please help!
HTML code:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">IT SPECIALIST</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" id="active" href="#">GŁÓWNA</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
O NAS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Zespół</a>
<a class="dropdown-item" href="#">Partnerzy</a>
<a class="dropdown-item" href="#">Facebook Fanpage</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OFERTA
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Odzyskiwanie Danych</a>
<a class="dropdown-item" href="#">Wsparcie dla twojej firmy</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-link" href="#">USŁUGI DLA FIRM I OSÓB PRYWATNYCH</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-link" href="#">DLACZEGO MY</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-link" href="#">ZGŁOŚ AWARIĘ</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2"></div>
</div>
I deleted whole css code, and nothing changed, but in case you need it here it is:
CSS code:
body {
margin: none;
padding: none;
}
.navbar .navbar-brand {
margin-left: 1vw;
}
.navbar button {
margin-right: 1vw;
}
.navbar .dropdown-item:hover, .navbar #nav-link:hover, .navbar #active {
background-color: #5394dd;
color: white;
}
.navbar .nav-item {
margin-left: 0.5vw;
}
.navbar .nav-item:last-child {
margin-right: 1vw;
}
Edit 1:
row is cousing the problem, while using nav, without any rows, and columns, navigation is taking whole site width, nothing more.
So, is there any other way, to center site, like this?
Remove all col's from around the Navbar and add a container instead.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!--Your nav content here-->
</nav>
</div>
I'm not sure exactly how it is destroying the site's width but try this adding this to your styling:
*{
margin: 0;
padding: 0;
}
I have a menu with a dropdown in it. When I click the dropdown, the child menu is a color. I'm trying to maintain that same color (which is in the hover state) in the parent item, after the menu is clicked. Currently, when I click the dropdown and then mouse away from the parent, it changes back to the original menu color (pink).
Best to open the snippet in full page to see what I'm referring to.
.dropdown-menu {
border: none;
border-radius: 0;
margin: 0;
}
.dropdown-item:hover {
background-color: #0091c7;
}
.nav-link.dropdown-toggle:hover {
background-color: #00aeef;
}
.nav-link > li.dropdown-toggle.active > a,
.nav-link > li.dropdown-toggle.active > a:focus,
.nav-link > li.dropdown-toggle.active > a:hover {
background-color: #00aeef;
color: #ffffff;
}
.bg-pink {
background-color: #d60c8c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<!-- HTML here -->
<div class="container-fluid bg-pink">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-light bg-pink">
<a class="navbar-brand" href="#">
<i class="fa fa-home fa-2x"></i>
</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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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 Parent
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #00aeef;">
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action Action</a>
<a class="dropdown-item" href="#">Action Action</a>
<a class="dropdown-item" href="#">Action Action</a>
<a class="dropdown-item" href="#">Action Action Action</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When the dropdown is clicked, the show class is added to its parent li.
I added
li.show > #navbarDropdown,
to your css here:
li.show > #navbarDropdown,
.nav-link > li.dropdown-toggle.active > a,
.nav-link > li.dropdown-toggle.active > a:focus,
.nav-link > li.dropdown-toggle.active > a:hover {
background-color: #00aeef;
color: #ffffff;
}
I have a website that I am developing utilizing the Bootstrap 4 framework. I am trying to create a navbar with the navbar-brand in the center. I was able to place the navbar-brand in the center with a navbar-nav on each side of the navbar-brand. Please find below the code that I utilized. My issue is that the navbar-brand is vertically aligned in the center of the navbar.
How can I align the navbar-brand to the bottom of the navbar and have the excess stick out at the top of the navbar without adjusting the margins?
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit;
}
#tblHeader {
width: 100%;
/*font-size: .8125rem;*/
font-size: 1rem;
text-align: right;
color: #ffffff;
font-weight: bold;
}
#tblHeader tr {
height: 50px;
}
.breadcrumb {
background-color: inherit;
margin-bottom: initial;
font-weight: bold;
}
.breadcrumb .active {
color: inherit;
}
#socialbrand {
text-align: right;
}
#mainNavbar {
background-color: gray;
}
#mainNavbar .container .navbar {
position: relative;
z-index: 0;
max-height: 40px;
}
.navbar-brand {
position: relative;
z-index: 1;
margin-right: initial;
}
.form-control {
width: 200px;
}
.btn-outline-navy {
color: #f6b40e;
background-color: transparent;
background-image: none;
border-color: #f6b40e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<div id="hdrContainer" class="container-fluid">
<div class="container">
<table id="tblHeader">
<tbody>
<tr>
<td>
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
</ol>
</nav>
</td>
<td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-flickr" aria-hidden="true"></i>
<i class="fa fa-wordpress" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</td>
</tr>
<tr>
<td colspan="2">
<nav class="navbar navbar-light">
<form class="form-inline">
<input class="form-control form-control-sm ml-auto mr-sm-2 float-right" placeholder="Search" aria-label="Search" type="search">
<button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="mainNavbar" class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<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 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="#">Disabled</a>
</li>
</ul>
<!-- Just an image -->
<a class="navbar-brand mr-auto ml-auto" href="#">
<img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="75" height="75">
</a>
<ul class="navbar-nav ml-auto 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="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<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="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The solution below makes use of the various flexbox utility classes available in Bootstrap, described in detail in the docs.
The .navbar-brand got wrapped into <div id="logo"> in order to set it's positioning to absolute, and it's bottom position to 0. That pushes down the logo container to the bottom of the navbar.
Additionally, I've added the .d-none .d-lg-block classes in order to hide the logo when the menu is collapsed.
Available as a CodePen as well.
/* Pushing logo to bottom */
#logo {
position: absolute;
bottom: 0;
}
/* Basic styling to resemble to source */
.navbar {
background-color: gray;
}
#header {
height: 100px;
color: white;
background-color: #0a3782;
display: flex;
justify-content: center;
align-items: center;
}
<div id="header">[header placeholder]</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<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 justify-content-around" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<div id="logo" class="d-none d-lg-block">
<a class="navbar-brand m-0" href="#">
<img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Item 1</a>
<a class="nav-item nav-link" href="#">Item 2</a>
<a class="nav-item nav-link" href="#">Item 3</a>
<a class="nav-item nav-link" href="#">Item 4</a>
</div>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
I want to create a div with full-width of the browser.
The div is inside a container and I couldn't change that structure.
Now the div inside the container has only the width of the container. Even if I set it to position: absolute like here: How to create a 100% screen width div inside a container in bootstrap?
The div is a dropdown-menu inside the bootstrap navbar.
Is there any solution to get it to 100% of the screen size? Is there anything inside the navbar what changes the position/width?
This is my code:
.dropdown-menu {min-width: 100%; position: absolute; display:block;}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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="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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" 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>
</li>
</ul>
</div>
</nav>
</div>
CSS has a unit vw, which stands for viewport width. 1vw represents 1% of the screen width.
Therefore, you can set width: 100vw to take up 100% of the screen width.
Update
For current markup you can set position: fixed, but you'll have to set correct top value manually. Unfortunately if your page is more than screen height your menu will keep the same position. Demo:
body {
margin: 0;
}
.dropdown-menu {
position: fixed !important;
top: 56px;
right: 0;
left: 0;
}
#media (max-width: 991px) {
.navbar-toggleable-md .navbar-nav .dropdown-menu {
top: 215px;
}
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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="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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" 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>
</li>
</ul>
</div>
</nav>
</div>
To achieve desired markup, you'll have to remove position: relative for all ancestors to apply absolute positioning relatively to window. So you'll have to fix all issues with this. Also you'll have to set top manually (because you are setting absolute positioning relatively to to window). Demo:
/* delete relatively position */
.container,
.navbar,
.nav-item {
position: static !important;
}
/* set absolute positioning */
.dropdown-menu {
position: absolute !important;
top: 55px !important;
left: 0;
right: 0;
}
#media (max-width: 991px) {
/* add centering for extra container */
.flex-center {
display: flex;
align-items: center;
}
/* fix positioning for toggler */
/* it will be broken to removed relative positioning for container */
.navbar-toggler-right {
position: static !important;
margin-left: auto;
margin-right: 1rem;
}
.navbar-toggleable-md .navbar-nav .dropdown-menu {
top: 215px !important;
}
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="flex-center">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler navbar-toggler-right" 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>
</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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" 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>
</li>
</ul>
</div>
</nav>
</div>
i had tried a lot not get a solution for this can u please help with this..actually im setting it by giving by minimum width to the dropdown menu but when in case of responsive and when menu item contains big words the menu items are expanding to out of the box.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar-two" class="navbar-nav navbar-toggleable-md mb-4">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-two-list mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">You & Peers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Family</a>
</li>
</ul>
<div class="mt-2 mt-md-0">
<ul class="nav">
<li class="nav-item">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Add Mutual Funds<sub><i class="fa fa-angle-down" aria-hidden="true"></i></sub></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
I think you should put the button and dropdown together in a col and use btn-block so it always fill the column. Then you can resize the column responsively.
Demo: http://www.codeply.com/go/OE4tnyG1lt
<div class="container-fluid">
<div id="navbar-two">
<div class="row">
<div class="col-sm-8 col-md-9">
<ul class="nav navbar-two-list">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">You & Peers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Family</a>
</li>
</ul>
</div>
<div class="col-sm-4 col-md-3">
<ul class="nav">
<li class="col-12 px-0">
<button class="btn btn-success btn-block dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Add Mutual Funds<sub><i class="fa fa-angle-down" aria-hidden="true"></i></sub></button>
<div class="dropdown-menu w-100">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://www.codeply.com/go/OE4tnyG1lt
You can use following code to set the width for both dropdown and button.just change the size of width
.dropdown-menu {
width: 100%;
}
.btn{
width: 100%;
}
You can use media queries. like,
#media only screen and (max-width: 768px) {
.dropdown-menu{
min-width: 400px;
}
}
#media only screen and (max-width: 480px) {
.dropdown-menu{
min-width: 320px;
}
}
You could clip the overflow when the text of the menu items gets too long:
.dropdown-item {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Note with the ellipsis property, overflowed content is indicated to the user with dots instead of just hard clipping the content