I am trying make one of the navbar dropdowns into a sub-menu that unfolds either to the left or right depending on the space.
How do I do this? I've tried everything.
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">PRODUCT NAME</a>
<!-- Links -->
<ul class="navbar-nav">
<!--A regular navbar link-->
<li class="nav-item">
<!--a class="nav-link" href="resources/pages/home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >Images</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR FLOORS/PAGES-->
<a class="dropdown-item" href="resources/callout/tore.html" target="iframe1">PAGE NAME</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Videos</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR VIDEOS-->
<a class="dropdown-item" href="resources/media/vids/" target="_blank">VIDEO NAME</a>
</div>
</li>
<!--Dropdown for additional documents-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Additional Documents</a>
<div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR DOCUMENTS-->
<a class="dropdown-item" href="Resources/media/docs/" target="">DOCUMENT NAME</a>
</div>
</li>
</ul>
</nav>
Related
I have been trying to get a navbar in Bootstrap 5 working with dead centered links and a left brand logo. However using flexbox options in Bootstrap 5 I can only seem to get the nave links sort of centered in a flex container. However the collapse behavior works as expected.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top navbar-default">
<div class="container-fluid">
<a href="#" class="navbar-brand me-auto">
<img style="height: 45px" src="https://lanman2018.ieee-lanman.org/files/2016/01/sample-logo#2x.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">page link/a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" aria-expanded="false">dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li>
<a class="dropdown-item" href="#">2nd Page</a>
</li>
<li>
<a class="dropdown-item" href="#"> This is a really long page nameS</a>
</li>
<li>
<a class="dropdown-item" href="#">still a long name</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Page</a>
</li>
</ul>
</div>
</div>
</nav>
If I set the logo position to absolute I get mostly what I am looking for but upon collapse the nav button sits under the logo. I am probably missing something obvious as I usually don't do front end.
Here is a link to a jsfiddle where I have both of the solutions I've been working on https://jsfiddle.net/0s24hLmf/
It should work if you push the toggler to the right using ms-auto...
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-default">
<div class="container-fluid">
<a href="/index.php" class="navbar-brand nav-logo me-auto position-absolute top-0">
<img style="height: 45px" src="https://lanman2018.ieee-lanman.org/files/2016/01/sample-logo#2x.png">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbar2">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Page Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" aria-expanded="false">dropdown</a>
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="#">2nd Page</a>
</li>
<li><a class="dropdown-item" href="#"> This is a really long page nameS</a></li>
<li><a class="dropdown-item" href="#">still a long name</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Page</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
So I have been trying to create a lateral menu that has a logo right on top of it as well as a traditional navigation menu next to it. But I seem to have ran into a problems where I cannot put my logo inside the lateral menu and to align it. Here is the code I have so far that I am trying to use. My final goal is to have it like this mockup that of a page I have made, any help will be most welcome https://i.stack.imgur.com/wwcXT.png
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITES</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Rafting</a>
<a class="dropdown-item" href="#">Canooing</a>
<a class="dropdown-item" href="#">Parachute</a>
<a class="dropdown-item" href="#">Soufflerie</a>
<a class="dropdown-item" href="#">Saut elastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
<li class="nav-item">
<a class="nav-link" href="#">EVENEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">A PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</li>
</ul>
</div>
</nav>
</div>
<nav class="navbar-lateral">
<ul>
<li class="logo">
<a href="" class="nav-link">
<img src="./img/so.png" alt="">
</a>
</li>
</ul>
</nav>
CSS for lateral bar
.navbar-lateral {
width: 5rem;
height: 100vh;
position: fixed;
background: white;
}
You can use Bootstrap built-in nav for the horizontal like you did and add a custom navbar to the lateral side with the logo inside it. Something like this:
HTML
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITES</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Rafting</a>
<a class="dropdown-item" href="#">Canooing</a>
<a class="dropdown-item" href="#">Parachute</a>
<a class="dropdown-item" href="#">Soufflerie</a>
<a class="dropdown-item" href="#">Saut elastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
<li class="nav-item">
<a class="nav-link" href="#">EVENEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">A PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</li>
</ul>
</div>
</nav>
</div>
<div class="lateral-nav">
<img src="https://tkruger4.files.wordpress.com/2010/11/logo-2_rgb.jpg" alt="">
item
item
item
</div>
CSS
.lateral-nav {
position:absolute;top:0;left:0;width:100px;background:white;height:300px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
}
img {
width:60px;height:60px;margin-top:10px;
}
.lateral-nav a {
writing-mode:vertical-lr;text-orientation:mixed;margin:10px 0;}
.navbar {
margin-top:10px;
}
I'm trying to change the background color of an active item in my dropdown menu.
So what I'm targetting is the aisles nav-item, which has a dropdown for 8 different categories. So for example, when I'm on Fruits and Vegetables, I would like for a color surrounding that category to be fixed on it so that it indicates to the users that it's on that category.
Right now, Bootstrap 4 applies a blue background color, but I want to change it to match my website.
Here is my HTML code:
<div class="collapse navbar-collapse nav-fill w-100" id="navbarNavDropdown">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<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="allproducts.html">All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="summer.html">Summer Essentials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sale.html">SALE</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Aisles
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color:
#FF6347";>
<a class= "dropdown-item active" href="aisle1.html"><span>Fruits & Vegetables</span></a>
<a class="dropdown-item" href="aisle2.html"><span>Dairy & Eggs</span></a>
<a class="dropdown-item" href="aisle3.html"><span>Meat & Poultry</span></a>
<a class="dropdown-item" href="aisle4.html"><span>Snacks</span></a>
<a class="dropdown-item" href="aisle5.html"><span>Bread & Bakery</span></a>
<a class="dropdown-item" href="aisle6.html"><span>Beverages</span></a>
<a class="dropdown-item" href="aisle7.html"><span>Cleaning & Household</span></a>
<a class="dropdown-item" href="aisle8.html"><span>Beauty</span></a>
</div>
</li>
</div>
Can you please help me achieve this, thanks.
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 2 years ago.
I'm using Bootstrap 4.2.1 and having issues trying to get the brand to appear to the right of my navbar. It's appearing just where I want it in a small viewport -- to the right of the hamburger -- but when expanded to a larger viewport, the logo appears to the left of the navbar items. I've tried using navbar-right, pull-right, float: right, placing the logo code in various spots in the navbar code, but I can't get it to appear on the right of the menu.
I'm probably missing something obvious, but any suggestions on how to get the logo to appear on the right? Here's the page. And below is an example of the code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<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 dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Right now, your logo resolves after the hamburger button, but before your menu. You'll just have to have the logo resolve last.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<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 dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
</div>
</nav>
Navber code:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Bootstrap code:
<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">
Dropdown menu inside the navbar doesn't open, anyone an idea on how to fix this?
Not very experienced with bootstrap and don't now what the problem is.
Your button don't call your div
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
your "aria-labelledby" does not match the button id "id="dropdownMenuButton""
it's in the bootstrap documentation
Try this for Bootstrap 4 dropdown navbar
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #fdfeff;">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navCollapse"
aria-controls="navCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdown01"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Nevermind I solved the issue, stupid mistake by not adding jquery