How to add line-separator in navbar? - twitter-bootstrap-3

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 -->

Related

How do I extend my navbar banner below my navbar row?

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" />

Divide the navbar into 3 equal parts

I have 3 menu items in my navbar. I want the entire nav to be divided into 3 parts for my 3 menus. I tried with the following code but the last menu item takes bit extra space than others. How do i fix it?
.navbar {
border : 1px solid #ffffff;
}
#intr1, #intr2 {
border-right: 1px solid #ffffff;
}
.menuLabel {
text-align: center;
font-size: 17px;
font-weight: bold;
color: #ffffff;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-header ">
<ul class="nav navbar-nav container">
<li class="col-md-4" id="intr1"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr2"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
<li class="col-md-4" id="intr3"><div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try with something like this:
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<ul>
<li class="col-md-4" id="intr1">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr2">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
<li class="col-md-4" id="intr3">
<a href="#">
<div class="menuLabel">INTERIOR DESIGN <span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
I hope this will help you a lot:
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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 customnavbarnav">
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
<li class="customlist">Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /.navbar navbar-default -->
CSS:
.customnavbarnav{
width: 100%;
text-align: center;
}
.customlist{
width: 33.33333333333333%
}
Just remove the .container class on the .navbar-nav because that is causing you to have 15px right padding which throws off the evenness.

bootstrap navbar - show only submenu on mobile

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;
}

Bootstrap Nav with 2 rows of links on desktop

I need to create a responsive nav with 2 rows of links. I would prefer to use bootstrap since it's already being used on the site. Any help to point me in the right direction would be greatly appreciated!
What I need it to look like
Just create something like this:
<nav>
<div class="container">
<div class="row">
<div class="col-md-*">
</div>
</div>
<div class="row">
<div class="col-md-*">
</div>
</div>
</div>
</nav>
Also just take a look at bootstrap's docs. Here is the link to Bootstrap's site
You need to spend some time looking at Bootstrap Navbar section also spend some time hacking around the examples and you will soon get the hang.
If you want a BIG, deep menu have a look at Yamm (yet another mega dropdown menu) or something similar. There are lots out there just search for bootstrap menus or dropdown menus... But the basic nav is very flexible.
After searching around for several hours, I was able to find a few different sources that ended up helping me figure it out.
Here's what my code ended up looking like. It's not perfect yet, but almost there.
Thanks everyone!
#nav-div { /*This is the div that wraps the entire logo and nav content*/
width:100%;
position: fixed;
top:0;
left:0;
z-index: 10;
margin: 0;
padding:0;
}
#nav-wrapper { /*This is the div that sizes the nav down to a col-md-9*/
padding:0;
margin:0;
}
#nav-container{
padding:0px;
}
#nav-top-row {
background-color: #6D6E70;
color: #fff;
padding: 0px 10px;
}
#nav-top-row a {
color:#fff;
padding-top:5px;
padding-bottom:5px;
font-size: 12px;
}
#nav-top-row a:hover {
background-color: #CCCCCC;
}
#nav-bottom-row {
background-color: #009578;
padding:0px 10px;
}
#nav-bottom-row a {
color:#fff;
}
#nav-bottom-row .dropdown-menu li {
background-color:#00806B;
}
#nav-bottom-row .dropdown-menu li a:hover {
background-color:#009578;
}
#nav-bottom-row li.dropdown.open a.dropdown-toggle {
background-color:#00806B;
}
#logo {
margin-top:35px;
width:90%;
max-width:250px;
margin-right:auto;
margin-left:auto;
}
#logo-div {
padding:0px;
background:rgba(255,255,255,.8);
}
.push-down { /*invisible div with no content that pushes down the main body content*/
margin-top:75px;
}
<div id="nav-div"class="">
<div id="logo-div" class="col-md-3">
<a href="#">
<img src="HM-Logo_Grn.png" id="logo" class="img img-responsive">
</a>
</div>
<div id="nav-wrapper" class="col-md-9">
<!-- Fixed navbar -->
<nav id="full-nav" class="navbar navbar-default">
<div id="nav-container" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Project name</a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<div id="nav-top-row" class="row">
<ul class="nav navbar-nav navbar-right ">
<li>SERVICES</li>
<li>ACCESS REPORT</li>
<li>REQUEST INSPECTION</li>
</ul>
</div>
<div id="nav-bottom-row" class="row">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
COMPANY <span class="caret"></span>
<ul class="dropdown-menu">
<li>PRESS RELEASES</li>
<li>NEWSROOM</li>
<li>AWARDS</li>
<li>MEDIA ASSETS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>BUYERS</li>
<li>SELLERS</li>
<li>AGENTS</li>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
<div class="push-down"></div>

Align item in bootstrap navbar

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!