I have a simple bootstrap 4 menu and would like to expand the submenu by default for mobile users. How would I accomplish this (first preference is for a CSS only solution)?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="http://www.mywebsite.com"> <img src="https://www.mywebsite.com/logo.png" style="width:75px;"> My Website</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>
<!-- expand this menu by default for mobile users -->
<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">
sub menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="~/Page 1">Page 1</a>
<a class="dropdown-item" href="~/Page 2">Page 2</a>
<a class="dropdown-item" href="~/Page 3">Page 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="~/Page 4">Page 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Page 5</a>
</li>
</ul>
</div>
Add show to <li class="nav-item dropdown">.
<!-- expand this menu by default for mobile users -->
<li class="nav-item dropdown show">
Edit: Bootstrap 3 was open Bootstrap 4 is show
Related
(new to coding)
The bootstrap (mobile) dropdown menu has the list items on the left. Is there any way to align them to the right?
Yes. text-align:right on the relevant ul. You might want to make that under a media query that would limit it to mobile if it changes things for your desktop view.
ul.navbar-nav {
text-align: right;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<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="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<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">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Bootstrap navbar align want align to the right
(6 answers)
Closed 2 years ago.
I am using the default Bootstrap navbar below:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
How can I align the last menu item (the drop down menu item) to the right? I want to leave the rest as it is, but align the last one to the right.
Thanks
Use w-100 on ul.navbar-nav and ml-auto on li.dropdown
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav w-100">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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 ml-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I'm newer to Bootstrap and have a question about my Navbar.
Here is my test site. TEST-DOMAIN
I'm currently using Bootstrap 4.3.1 with JQuery 3.4.1.
Menu looks and functions great on Desktop. Dropdown appears as expected. I added columns to the dropdown to make a Mega Menu of sorts.
When the site transitions over to mobile, the dropdown is appearing to the RIGHT of the parent menu item. Is there a way to make it appear BELOW the parent item and push the rest of the menu down below it?
I tried setting the dropdown to Display: absolute as found in other posts about this. But, while it shifts the dropdown to the left like I want, it floats it overtop of the rest of the menu. I would like it to align left, while pushing the rest of the menu below it.
Thanks for any help!
* EDIT - Adding code *
<!--Navbar-->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark nav-transparent sticky-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" style="margin-top: -5px;"><strong>Test Website</strong></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-center">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item" href="another-page.html">ANOTHER PAGE</a>
<a class="dropdown-item" href="pools.html">POOLS</a>
<a class="dropdown-item" href="test-10.html">TEST 10</a>
<a class="dropdown-item" href="test-5.html">TEST 5</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="test-6.html">TEST 6</a>
<a class="dropdown-item" href="test-7.html">TEST 7</a>
<a class="dropdown-item" href="test-8.html">TEST 8</a>
<a class="dropdown-item" href="test-9.html">TEST 9</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="yet-another-page.html">YET ANOTHER PAGE</a>
<a class="dropdown-item" href="awesome-page.html">AWESOME PAGE</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="kitchen-vision.html">KITCHEN VISION</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
I've removed all my custom CSS for the NavBar to make sure I wasn't doing something incorrect with my edits.
#media screen and (max-width: 768px) {
.mx-auto.d-flex {
margin: 0!important;
justify-content: space-between;
display: flex;
width: 100vw;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="mx-auto d-flex">
<a class="navbar-brand" href="#">Test Website</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 ">
<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">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item" href="another-page.html">ANOTHER PAGE</a>
<a class="dropdown-item" href="pools.html">POOLS</a>
<a class="dropdown-item" href="test-10.html">TEST 10</a>
<a class="dropdown-item" href="test-5.html">TEST 5</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="test-6.html">TEST 6</a>
<a class="dropdown-item" href="test-7.html">TEST 7</a>
<a class="dropdown-item" href="test-8.html">TEST 8</a>
<a class="dropdown-item" href="test-9.html">TEST 9</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="yet-another-page.html">YET ANOTHER PAGE</a>
<a class="dropdown-item" href="awesome-page.html">AWESOME PAGE</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="kitchen-vision.html">KITCHEN VISION</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
I need to fix the below bootstrap code to fixed on the top of a web page while scrolling down. How can it do? please help me..
Here the bootstrap code that I have. Please help me to change this code from static to fixed while scrolling down the web page.
<div class="header_top" id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right mx-auto" 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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</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">
Drop Down
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></a>
<a class="dropdown-item" href="gallery.html">Gallery</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="404.html">Services</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
...
read this document for more details
https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top
you can use css:
nav{
position: fixed;
}
actually what was written behind the class navbar-fixed-top
You can add:<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
data-spy="affix" data-offset-fop="scroll amount"
You can see this link for example:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&stacked=h
Another example: https://www.codeply.com/go/LDHQhWUG0x
<div class="container">
<nav class="navbar navbar-toggleable-lg fixed-top 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 ">
<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 want to pull-right home, features, pricing, and dropdown link elements.
I was trying to add to ul class="pull-right" but its not working.
I also tried to add nabar-right class to ul section also nothing.
From the bootstrap documentation:
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.
So use the .navbar-right class on your <ul>
Example: https://jsfiddle.net/1s7j8srp/