I'm newbie to css and bootstrap and can not figure out how to solve this. Any help are welcome.
I have two problems with my code.
1) When I click on the 'Welcome, User' menu in small screens (mobile), the dropdown menu opens inside the navigation bar, distorting the bar and changing its height. I want it to behave in the same way as on larger screens (desktops, for example). When I click, I want it to open the menu items without changing the navigation bar, in front of the navigation bar but not inside.
2) Another problem: even on larger screens, I can not see the menu items completely. Some of the text of the items is hidden at the edge of the screen. I would like the menu to appear completely on the screen, no matter if it is desktop or mobile.
To make it clear, I record a very small video demonstrating the problem:
https://puu.sh/Bq34w/ac56908be0.mp4
The complete code:
https://jsfiddle.net/fredslz/0v7qwjdm/12/
<!doctype html>
<html lang="en">
<body class="text-center">
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" 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>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav ml-md--auto">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</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>
</ul>
</nav>
</body>
</html>
And the CSS:
.navbar {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
You need to use dropdown-menu-right on the dropdown if you want the menu items properly aligned.
What's not clear is why you're using the toggler, because you don't have any collapsible menu items (navbar-collapse). Just remove the toggler and use navbar-expand so that the Navbar doesn't collapse in the mobile view.
<nav class="navbar navbar-expand navbar-light fixed-top" style="background-color: #FFFFFF;">
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
</nav>
https://www.codeply.com/go/j1HZLEdyrC
The dropdown will always open inside the mobile collapsed Navbar which is by-design. If you do want to keep the mobile toggler, and intend to add collapsible items, you can use position-absolute on the dropdown-menu to override the default behavior.
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" 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>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right position-absolute" 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>
</nav>
Demo of both options: https://www.codeply.com/go/j1HZLEdyrC
Related: Bootstrap 4 Navbar Dropdown Menu Items Right
For the issue with the mobile dropdown, you can use this to position it absolutely in the mobile view too:
.navbar-nav .dropdown-menu {
position: absolute;
}
For the alignment of the dropdown, just add the class dropdown-menu-right to your dropdown-menu.
See demo below (I have given !important to cope with the cascading order in the snippet) and working fiddle here:
.navbar {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
/* the rest of your styling */
}
.navbar-nav .dropdown-menu {
position: absolute !important;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="background-color: #FFFFFF;">
<button class="navbar-toggler navbar-nav mr-auto" 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>
<a class="navbar-brand mx-auto" href="#">My Brand</a>
<ul class="nav navbar-nav ml-md--auto">
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
Welcome, User <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<!-- ADDED CLASS -->
<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>
</nav>
Related
I'm having trouble adding a bootstrap navbar to my site, links will only work if I place them inside of a dropdown... if I add a regular nav-item > nav-link to the navbar it appears as text on the live site. I've read a ton of docs and threads and I cannot figure this out... I'm not sure what I'm doing wrong, or what to look for at this point and I would really appreciate any feedback!
Here is my html:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container-fluid"><a class="navbar-brand" href="#">LOGO</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#overview">Overview </a></li>
<li class="nav-item dropdown"><a id="navbarDropdown" class="nav-link dropdown-toggle" role="button" href="#" data-bs-toggle="dropdown" aria-expanded="false">Next Steps</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#next_steps">Personalized</a></li>
<li><a class="dropdown-item" href="#general_next_steps">General</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a id="navbarDropdown" class="nav-link dropdown-toggle" role="button" href="#" data-bs-toggle="dropdown" aria-expanded="false">Resources </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#resources">Tutorials</a></li>
<li><a class="dropdown-item" href="#contact">Contact Us</a></li>
</ul>
</li>
</ul>
<form class="d-flex"><button class="btn btn-outline-success" type="submit">Log In</button></form></div>
</div>
</nav>
The only CSS I've changed from the Bootstrap file is:
.navbar {
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 99 !important;
}
.container-fluid { max-width: 1440px !important; }
When I minimize the window, there's white space at the right hand side of the nav-bar. I didn't use any css.
If anybody can help me with that. I have attached my html code here.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">7AM Dashboard</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="#">Applications <span class="sr-only">(current)</span></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">
Domains
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" (click)="goToView('Channel')">Channel</a>
<a class="dropdown-item" (click)="goToView('Claims')">Claims</a>
<a class="dropdown-item" (click)="goToView('Member')">Member</a>
<a class="dropdown-item" (click)="goToView('Plan')">Plans</a>
<a class="dropdown-item" (click)="goToView('Provider')">Provider</a>
<!-- <div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>-->
</div>
</li>
<li>
<div class="d-inline-flex"><a class="nav-link " aria-haspopup="true" aria-expanded="false">
Date
</a>
<input type="date" (change)="changeDate()" [(ngModel)]="date"></div>
</li>
</ul>
</div>
</nav>
Try placing your nav inside a container-fluid, and add this to your css just in case:
html,body {
margin: 0;
padding: 0;
width: 100%;`enter code here`
height: 100%;
};
Btw, sometimes chrome does that! if you inspect/open your "yourFileName".html using Firefox it should behave properly.
I am using Bootstrap 4. In the dropdown section, the dropdown items are displayed vertically, i.e. one below the other. I these dropdown items displayed horizontally, i.e. one beside the other.
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="index.html">Brand Name</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 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>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
In the above code, I want the elements with "dropdown-item" class to be displayed one beside the other. I have used the above code from bootstrap website, version 4.3.1.
I think you have to overwrite .dropdown-menu class's CSS. So instead of overwriting this class directly, give a custom class say .dd-horizontal and add CSS below.
.dd-horizontal {
display: flex;
}
Also, you need to adjust other CSS props as well.
I implemented a basic navbar using Bootstrap and here is the look of it:
As you can see, the bar does not fully covered the entire width with some empty margin space left. I changed container class to container-fluid and it just expands the navbar longer but still doesn't fit the entire screen.
Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-expand-sm navbar-dark bg-dark ">
<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>
</ul>
</div>
</nav>
</div>
I also tried setting .container to width:100%.
Is this supposed to be like this?
How do I fix this?
Either you need to remove .container-fluid or add to it .p-0 as .container-fluid is adding additional padding to the div. Please try the below snippet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-expand-sm navbar-dark bg-dark ">
<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>
</ul>
</div>
</nav>
You just have to remove .container-fluid class. because it take padding-right: 15px; and padding-left: 15px;
You can either remove the container-fluid class or modify your existing container-fluid class in CSS as such:
.container-fluid {
padding-left:0px;
padding-right:0px
}
I'm trying to add the bootstrap menu on the header in the application, almost everything is ok, but when using on <nav> the <li class='nav-item dropdown'>, it adds an empty space and doesn't collapse on responsive mode.
I added a simple menu with brand on right side, with the following structure:
>Menu
--Home
--Link
--Dropdown
---Action
---Another action
---Something else
--Another dropdown
---Action
---Another action
---Something else
--Disabled
>Brand
In desktop mode, the menu is being shown properly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-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 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Another 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>
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
My output needs to be like this:
Instead, I'm getting this:
Try to edit them in CSS.
.nav-item{
line-height: normal;
}
It seems you want to block the space of your disabled element, but not showing it.
With this condition you can't just display: none; but use any sort of work-arround.
You could get the trick simple with adding css:
.disabled { opacity: 0;}
As you can see in this Codepen:
https://codepen.io/anon/pen/dBzYNg
EDIT: I don't know how to change view width in codepen, but you can use developer tools to change the browser view or pull the border between code and preview so that preview is like mobile width.