I have a navigation from bootstrap 4 Beta.When used in the mobile view or sm view the menu is expanded it does not collapse even after clicking the menu button.If clicked on menu buttons it just re-expands.
#nav ul li a {
color: white;
}
#nav ul li a:hover {
color: orangered;
}
#nav ul li a:active {
color: orangered;
border-top: 2px solid orangered;
text-decoration: none
}
.navbar-brand {
text-decoration: none;
font-size: 25px;
font-weight: bolder;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Something New</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg" id="nav"> <a class="navbar-brand" href="#"><span style="color: orangered;letter-spacing: 1px">Tech</span> DudeZ</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 container-fluid" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" style="font-weight: bold">
<li class="nav-item active"> <a class="nav-link" 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="#">About Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Work</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
</ul>
</div>
</nav>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>
You can resolve this issue by removing container-fluid from the div.
<nav class="navbar navbar-dark bg-dark navbar-expand-lg" id="nav"> <a class="navbar-brand" href="#"><span style="color: orangered;letter-spacing: 1px">Tech</span> DudeZ</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 ml-auto" style="font-weight: bold">
<li class="nav-item active"> <a class="nav-link" 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="#">About Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Our Work</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
</ul>
</div>
</nav>
Related
I used a bootstrap navbar, I created a hover effect and the problem is that when I click on a tab, the color changes in white but there is still a black margin.
Here is how it looks like:
how it is
And here is how I want it to look like:
how it should be
Here is the code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Elegant<i class="fa fa-square"></i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#homepage">HOMEPAGE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PAGE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.nav-item a {
font-size: 12px;
color: white;
letter-spacing: 2.5px;
padding: 25px !important;
display: block;}
.nav-item a:hover {
background-color: white;
color: black;}
Make the padding of the relevant container to be 0, that is the navbar.
.nav-item a {
font-size: 12px;
color: white;
letter-spacing: 2.5px;
padding: 25px !important;
display: block;
}
.nav-item a:hover {
background-color: white;
color: black;
}
.navbar {
--bs-navbar-padding-y: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Elegant<i class="fa fa-square"></i></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#homepage">HOMEPAGE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PAGE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</li>
</ul>
</div>
</div>
</nav>
I use fluent kit with bootstrap 4.1.2.
From the navbar docs (I want this one because the toggler changes its icon on open / close) I did take the second example, from the #position section. However, the hamburger is not centered vertically. How can I fix it?
Navbar with wrong hamburger:
I tried removing padding but it didn't help and I am stuck.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/js/fluent-kit.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark py-2">
<strong class="navbar-text">
Navbar position example
</strong>
<button class="btn mi navbar-toggler shadow-none mt-0" type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navbar submenu</span>
</button>
<div class="collapse navbar-collapse" id="navbar-position">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Remove .btn class from the <button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/js/fluent-kit.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark py-2">
<strong class="navbar-text">
Navbar position example
</strong>
<button class="mi navbar-toggler shadow-none mt-0" type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navbar submenu</span>
</button>
<div class="collapse navbar-collapse" id="navbar-position">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Add this css code in your css file:
nav.navbar .navbar-toggler {
line-height: 10px;
padding: 0;
}
you can also use transform:translateY to align
.navbar .navbar-toggler {
transform: translateY(-17%);
}
Add this css in your css file.
.navbar .navbar-toggler {
padding: .5rem .75rem;
}
I want to remove the padding-left of the first .nav-link in .navbar-nav.
Here's an example.
In bootstrap 4 I created a nav and gave padding to .nav-link:
.navbar-dark .navbar-nav .nav-link {
color: #fff;
padding-left: 1rem;
padding-right: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="navigation container-fluid">
<nav class="container navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="http://www.flakneconstructionllc.com">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
But it's not working because there is a .nav-item between the .navbar-nav & .nav-link.
Do you guys have any solution?
How can I select first item in this case?
The easiest way is with the pl-0 padding utility class. You can use it on the first nav-link, and on the navbar too if you want to remove all of the left whitespace.
<section class="navigation container-fluid">
<nav class="container pl-0 navbar navbar-expand bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pl-0" href="http://www.flakneconstructionllc.com">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
https://www.codeply.com/go/hIgX0LyIaB
To use CSS to target the first link use...
.navbar-nav .nav-item:first-child .nav-link {
padding-left: 0;
}
I put brand on center navbar and i want to have navigation to left side and navigation to right side. All this work good but i have question how to align left and right navigation center like on screenshot belowe.
Here is my code:
.navbar {
position: relative;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="img/profile.png" width="250" />
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Почетна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нама</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Мени</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Прославе</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерија</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Локација</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
</nav>
Hi you can try doing this to achieve what you wanted.
First remove the class .mr-auto on your <ul class="navbar-nav"> and then add
a class .custom-css to <div class="collapse navbar-collapse custom-css" id="navbarSupportedContent"> since .navbar-collapse is already set to display:flex, we will now just set the justify-content: space-around; to the .custom-css
Please see the code below.
.navbar {
position: relative;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
.custom-css{
justify-content: space-around;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="img/profile.png" width="250" />
</a>
<div class="collapse navbar-collapse custom-css" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Почетна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нама</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Мени</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Прославе</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерија</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Локација</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
</nav>
Hope this helps
you have 2 ul classes , combine all elements in one class and then use Div class Container and then use justify content=centre to bring all elements in center. please see below code.
.container {
display: flex;
align-content: center;
justify-content: center;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Прославе</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерија</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Локација</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">3</a>
</li>
</ul>
</div>
</div>
</nav>
Run code snippetReturn to post
</body>
</html>
It would be better (and responsive) to make 2 collapsible navs to the left and right of the logo...
https://www.codeply.com/go/8xMhvER5At
<nav class="navbar navbar-expand-lg navbar-dark bg-dark position-relative">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Почетна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">О нама</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Мени</a>
</li>
</ul>
</div>
<div class="mx-auto order-0 mt-lg-5 mt-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/250" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Прославе</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Галерија</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Локација</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
Then you only need a little CSS for the nav height:
#media (min-width: 992px) {
.navbar {
height:150px;
}
}
I've got a navbar in Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>
and I want to make that the language switch links will be before "MENU" burger, is this possible?:
LINK
Any ideas how I can do that? I haven't been able to find a solution.
Make ul absolute and place it with top and right coordinates.
Set both ul and li's to inline-block.
Example below:
ul.nav.navbar-nav.lang-right {
position: absolute;
right: 160px;
top: 7px;
display: inline-block;
}
li.nav-link {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>