I'm rebuilding a new website and upgrading from Bootstrap 3.3 to Bootstrap 5. I'm re-creating the look and feel of the navbar seen here. I've gotten very close but am having trouble with the banner. I can't figure out how to get the banner to extend below the navbar and still fit within the container class.
Here's a chunk of their code that displays the image I'm also opting to use:
<nav class="navbar navbar-inverse navbar-static-top">
<script src="http://www.utah.gov/nav/fluidheader.js" type="text/javascript" class="utahgov"></script>
<div class="container">
<img src="root/images/purpleLogo.png" class="purpleLogo" />
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="dropdown">
HOME<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li >Division Home</li>
<li>Oil and Gas Program Home</li>
</ul>
</li>
<li>FORMS</li>
<li>STATISTICS</li>
<li>WELL FILES</li>
<li class="dropdown">
QUICK REFERENCES<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Well Bonding</li>
<li>Drilling Permits</li>
<li>Drilling a Well</li>
<li>Operator Changes</li>
<li>Reporting</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
It looks like all they're doing is putting the image in the same container as the navbar items and the banner is automatically spilling out of the navbar. So far, I have the navbar elements in their own row. Then I divided the banner from the navbar items using columns. However, since the banner is inside the navbar class, it extends the navbar too low.
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
margin-bottom: 15px;
}
.homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
.purpleLogo{
position: absolute;
z-index: 2;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<div class="row">
<div class="col-2">
<img id="purpleLogo" src="https://www.ogm.utah.gov/coal/images/purpleLogo.png" />
</div>
<div class="col-10">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Division Home</li>
<li>Oil and Gas Program Home</li>
</ul>
</li>
<li class="nav-item dropdown">
ABOUT US
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>About Us</li>
<li>Mission Statement</li>
<li>Responsibilities</li>
</ul>
</li>
<li class="dropdown">
DATA RESEARCH CENTER
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Data Research Center Home</li>
<li>Data Explorer</li>
<li>LiveData Search</li>
<li>Electronic Reporting</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="dropdown">
QUICK REFERENCES
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Well Bonding</li>
<li>Drilling Permits</li>
</ul>
</li>
<li class="dropdown">
OTHER LINKS
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Oil and Gas Associations</li>
<li>For Students and Teachers</li>
<li>Utah DNR</li>
<li>Utah.gov</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I was able to solve my problem. There were a couple of things I had to do:
I ended up not needing to use the row class nor the column classes.
In my styles.css file, purpleLogo was labeled as a class when it was supposed to be an id.
I had to give #navbarSupportedContent a left margin of 224px so the navbar links didn't overlap the banner.
I had to give #purpleLogo a top position of 0px.
I had to remove the .img class and assign these properties to individual ids.
#homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
#purpleLogo{
position: absolute;
top: 0px;
}
#navbarSupportedContent {
margin-left: 224px;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<img id="purpleLogo" src="https://minerals.ogm.utah.gov/images/purpleLogo.png" />
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li >Division Home</li>
<li>Oil and Gas Program Home</li>
</ul>
</li>
<li class="nav-item dropdown">
ABOUT US
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>About Us</li>
<li>Mission Statement</li>
<li>Responsibilities</li>
<li>Staff</li>
<li>Emergencies</li>
<li>Email Us</li>
<li>O&G Facts</li>
</ul>
</li>
<li class="dropdown">
DATA RESEARCH CENTER
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Data Research Center Home</li>
<li>Data Explorer</li>
<li>LiveData Search</li>
<li>Electronic Reporting</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-logs/logs-main.xhtml">WELL LOGS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/noticesAndUpdates.php">NOTICES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/rules.php">RULES AND STATUTES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/publications.php">PUBLICATIONS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/wellSpacingBoardOrders.php">WELL SPACING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/mapResources.php">MAP RESOURCES</a></li>
<li class="dropdown">
QUICK REFERENCES
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Well Bonding</li>
<li>Drilling Permits</li>
<li>Drilling a Well</li>
<li>Operator Changes</li>
<li>Reporting</li>
</ul>
</li>
<li class="dropdown">
OTHER LINKS
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Oil and Gas Associations</li>
<li>For Students and Teachers</li>
<li>Government Agencies</li>
<li>Industry Information and Research</li>
<li>Oil and Gas Pricing</li>
<li>Some of Utah's Top Oil and Gas Producers</li>
<li>DOGM Board Members</li>
<li>Utah DNR</li>
<li>Utah.gov</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">EMERGENCIES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/permittingReview.php">PERMITTING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/inspectionsReview.php">INSPECTIONS</a></li>
</ul>
</div>
</div>
</nav>
<img id="homeBanner" src="https://minerals.ogm.utah.gov/images/MINERALSmainSmall.jpg" />
Related
My current accordion functionality is when we click on '+' sign it opens the accordion and leaves it open even though we click on the '+' sign of other accordion.
What i need is on click of one accordion other open accordions should close.
Below is my Codepen link.
<aside class="col-md-4">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
</section>
</aside>
Thanks
CodePen
You can achieve this by using data-parent to your link, here is the snippet with your code
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
.sidebar-tools a {
color: white;
}
a.tile-link {
text-decoration: none;
}
.tile-link {
-js-display: flex;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px;
margin: 2px 0;
}
.tile-link:hover {
background-color: #2980b9;
}
.tile-link[data-toggle]:after {
content: '\f067';
font-family: 'fontawesome';
transition: all .25s ease-in-out;
float: right;
}
.tile-link[aria-expanded="true"]:after {
transform: rotate(45deg);
}
.sidebar-collapse {
background-color: #95a5a6;
margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
color: white;
display: block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/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/2.0.4/js/bootstrap.min.js"></script>
<aside class="col-md-4" id="myGroup">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
I need to add separators between the links. Took navbar from boostrap3 components. Tried to use border-left, but failed. Broke my brain with this simple problem. Would be very thankful for any help.
.navbar-default {
z-index: 2;
text-transform: uppercase;
background-color: #cb5a3d;
}
.navbar-default .navbar-nav li > a {
margin-right: 100px;
padding: 25px 0;
color: #FFFFFF;
font-family: "FiraSans-bold", sans-serif;
}
.navbar-default .navbar-nav li:first-child {
margin-left: 100px;
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>о компании
</li>
<li>услуги
</li>
<li>новости
</li>
<li>полезная информация
</li>
<li>контакты
</li>
</ul>
</div>
<!-- end navbar-collapse -->
</nav>
<!-- end navbar -->
I have a standard bootstrap navbar, that collapse on mobile. Here below the code, for your reference:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu with dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu voice 1</li>
<li>Submenu voice 2</li>
<li>Submenu voice 3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I would like, after clicking on the hamburger menu on mobile, to get directly the 3 <li> "Submenu voice x" and hide the parent <li> (class="dropdown").
How can I achieve this result? Thank you
You can use CSS for this:
#media (max-width: 767px) {
.navbar-nav .dropdown-menu {
display: block;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-toggle {
display: none !important;
}
.navbar-inverse .navbar-nav .dropdown-menu > li > a {
color: #9d9d9d;
}
}
CODEPEN
I had to add the below to .navbar-nav .dropdown-menu in order to make it work.
opacity:1;
visibility: visible;
Try below code.
HTML:
<nav class="main-menu navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent1">
<ul class="navigation clearfix">
<li class="current dropdown"><a routerLink="/">Home</a>
</li>
<li class="dropdown">About
<ul class="dropdown-menu">
<li>Company Overview</li>
<li>Vision Mission</li>
<li>Ethics & Core Values</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
.dropdown:hover > .dropdown-menu{
display: block;
}
I'm absolutly stacked while trying to align item in bootstrap navbar vertically on both desctop and mobile view.
Does anybody can explain how to di it?
I need to align avatar and name to right side on desctop and mobile and centerd vertially in navbar.
Here the HTML code:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<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 logo" href="#"><b>Super</b> logo</a>
</div>
<div class="nav navbar-nav navbar-right">
<ul class="unstyled">
<li>
<a href="/profile">
<img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt="">
<span class="hidden-xs">User name</span>
</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="main-nav">
<ul class="nav navbar-nav visible-xs">
<li><i class="fa fa-tachometer"></i> menu 1</li>
<li><i class="fa fa-wrench"></i> menu 2</li>
<li><i class="fa fa-sign-out"></i> menu 3</li>
</ul>
</div>
</div></nav>
and CSS
.navbar-toggle {
position: absolute;
left: 10px;
}
.logo {
width: 100%;
padding: 15px 0;
text-align: center;
height: 20px;
}
.img-rounded {
height: 35px;
width: 35px;
border-radius: 50%;
}
.unstyled li {
list-style: none;
}
.unstyled a {
text-decoration: none;
}
#media only screen and (min-width: 768px) {
.logo {
width: 150px;
}
}
Here is a wrong eximple.
http://www.bootply.com/zh0J2u4KUU
updated use this
#media (max-width: 767px)
{
ol, ul{margin-top:6px; margin-right:302px;
}
<ul class="unstyled pull-right">
<li>
*******
</li>
</ul>
change the logo class to pull-right!
I'm building a site using the Bootstrap (3.2.0) and I have a button on my page that I'd like to trigger a "dropdown" menu style effect however instead of having the menu expand downward from the button I'd like it to slide out of the right side. The "dropdown" menu items would still be stacked vertically just like normal but instead of having the top of the menu connected to the bottom of the button, the upper-left side of the menu would be connected to the upper-right side of the button.
sounds like a great idea is an example of a side by side nav, i found on the net. http://www.bootply.com/uBVgiR9DDd
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
<ul class="nav">
<li class="dropdown"> <a class="" href="#" data-toggle="dropdown">Dropdown Heading</a>
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li><a class="" href="#">Col 1 - Opt 1</a>
</li>
<li><a class="" href="#">Col 1 - Opt 2</a>
</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li><a class="" href="#">Col 2 - Opt 1</a>
</li>
<li><a class="" href="#">Col 2 - Opt 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>