I'm currently struggling a bit on centring my search bar inside my nav. I've tried many different things, like mr-atuo and ml-auto or mx-auto but I just can't get the element to move. I don't want to use individual pixels because then it will look horrible on mobile. Here is a small demonstration of where the bar needs to be and where it currently is: https://imgur.com/a/bHXJD
Here is the code for my navbar:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://use.fontawesome.com/0ba2bca7b4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom z-depth-half">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fa fa-skype"></i>
</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">
Vragen
</li>
<li class="nav-item">
Aanbieders
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item" style="border-right: 0.1rem solid lightgrey">
<form class="form-inline">
<input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search">
<button class="btn btn-search my-2 my-sm-0 " type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="">Aanmelden</a>
</li>
<li class="nav-item">
<a class="nav-link btn nav-register-btn" href="">Registreren</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</html>
Thanks in advance!
You will have to change your HTML structure a bit. Move the form out of the UL
HTML:
...
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2 search-input" type="search" placeholder="Zoeken..." name="search" id="search">
<button class="btn btn-search my-2 my-sm-0 " type="submit">
<i class="fa fa-search"></i>
</button>
</form>
<ul class="navbar-nav">
...
CSS:
.form-inline{
width: 100%;
display: flex;
justify-content: center;
}
.form-inline #search{
width: 50%;
}
JsFiddle
One solution would be to assign a min-width to your .form-inline and let the .search-input grow with flex-box:
.form-inline {
min-width: 500px;
}
.search-input {
flex-grow: 3;
}
codepen
Related
Is it possible to have the searchbar in the bootstrap navbar to be fixed to the right side of the screen or would that go against it's flexibility? I'd like it to stay at the rightmost side of the screen regardless of the amount of links in my navbar. I'm a beginner to both css and bootstrap so I was unsure if I should edit the size in the class section of the element or override it in css. I've managed to modify other aspects of the navbar but I can't seem to move the search bar one bit. I assume it's since d-flex makes it next to the previous element.
#navbarDog{
background-color: #F5EFE6;
}
#logo{
height: 100px;
}
.nav-link{
font-size: 20px;
transition: font-size 0.4s;
}
.nav-link:hover{
font-size: 25px;
}
.header-products {
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox excersice - Fibonacci Flexbox</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg" id="navbarDog">
<div class="container-fluid">
<a class="navbar-brand" href="index.html" ><img src="../img/logo.png" alt="" id="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<header class="header-products">
<h1>Products</h1>
</header>
<main>
<div class="gallery">
<img src="" alt="">
</div>
<p>Feel free to purchase one of our t-shirts, your money will go to save even more dogs</p>
</main>
</body>
The problem is with the width of your navbar, just replace me-auto with w-100 and give the search bar ms-auto to push it to the right.
<ul class="navbar-nav w-100 mb-2 mb-lg-0">
.
.
.
<form class="d-flex ms-auto">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
I am trying to make my navigation bar transparent which I made using bootstrap. I have tried previous solutions of stackoverflow but none of them worked. this is my code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">Navbar </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<div class="aa">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<div class="">
<ul class="nav navbar-nav navbar-right">
<li class="nav-link"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</nav>
I have tried this css to make bootstrap navbar transparent but it does not work for me.
This is it:
just add this in the head section below all link tags:
<style>
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: .5rem 1rem;
opacity: 0.5;
}
</style>
check : https://jsfiddle.net/sugandhnikhil/32kuLbmd/
Thanks!!
Use class bg-transparent instead of bg-light
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<a class="navbar-brand mb-0 h1" href="#">Navbar </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<div class="aa">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<div class="">
<ul class="nav navbar-nav navbar-right">
<li class="nav-link"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</nav>
</body>
</html>
You are using a class" bg-light", you need to remove this in order to make the transparent navbar.
body {
background-image: url(https://www.blackhillsbadlands.com/sites/default/files/styles/bhb40_page_hero/public/photos/events/5th-annual-holiday-bazaar/abstract-background-blur-255377.jpg?itok=TBiKp5V6);
}
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand mb-0 h1" href="#">Navbar </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<div class="aa">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<div class="">
<ul class="nav navbar-nav navbar-right">
<li class="nav-link"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</nav>
</body>
Im trying to create a navigation which has a login form and below login form is the menu links.
I want these two in my navigation. But the problem is that the output has only given me is one horizontal. And the menu links are not below in the login form.
I want the menu links below the login form. But it's giving me a wrong output
CSS:
.nav-link {
font-size: 18px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.navbar-light .navbar-nav .nav-link {
color: #ffff !important;
}
#search { margin: auto; }
body {
overflow-x: hidden;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1, user-scalable=no">
<title></title>
<!-- favicon -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- /favicon -->
<link href="/realcss/bootstrap-4.1.3.min.css" type="text/css" rel="stylesheet">
<link href="/realcss/flag-icon.min.css" type="text/css" rel="stylesheet">
<link href="/realcss/fontawesome-all-5.3.min.css" type="text/css" rel="stylesheet">
<link href="/css/layout.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- navigation.tpl -->
<header>
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-dark border-bottom" style="float: right;">
<a class="navbar-brand" href="#"><img class="logo" src="/images/logo/M.png" style="max-width: 400px;
max-height: 64px;" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarCollapse">
<div id="search">
<form class="d-flex justify-content-center align-items-center form-inline my-2 my-lg-0">
<div class="col-auto pl-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-user"></i></div>
</div>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email Address">
</div>
</div>
<div class="col-auto pl-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-lock"></i></div>
</div>
<input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Password">
</div>
</div>
<div class="col-auto pl-0 pr-0">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Login</button>
</div>
</form>
</div>
<ul class="navbar-nav d-flex justify-content-center">
<li id="li-home" class="nav-item active">
<a id="link-home" class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li id="li-about" class="nav-item">
<a id="link-about" class="nav-link" href="#">Link</a>
</li>
<li id="li-team" class="nav-item">
<a id="link-team" class="nav-link" href="#">Link</a>
</li>
<li id="li-news" class="nav-item">
<a id="link-news" class="nav-link" href="#">Link</a>
</li>
<li id="li-contact" class="nav-item">
<a id="link-contact" class="nav-link" href="{{ route('promotion') }}">Promotion</a>
</li>
</ul>
</div>
</nav>
</header>
</body>
Try the following CSS:
.navbar-expand-md .navbar-collapse{
flex-direction:column;
}
Live Demo
I need some help with bootstrap 4 and css. I have shared the code below
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<i class="fa fa-shopping-cart" style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Please see it live in https://codepen.io/kofhearts/pen/YjQZNM
In the link is a bootstrap 4 example with navbar. There is a cart icon to the right of search bar. What i want to achieve is at the expanded state the cart should be present as it is now i.e right of search section but when the section collapses in mobile views, the cart should not be in collapsible section but it should be to the left of the toggle button. I have attached an image of expected result
How can I achieve this using css or any other method?
UPDATE:
In the original code the cart is wrapped with anchor like follows. So the solution should work when the cart is wrapped with anchor tag
<i class="fa fa-shopping-cart ml-auto moving-cart" style="font-size: 24px; margin-right: 15px;" aria-hidden="true"></i>
Remember when using bootstrap, to always design from mobile first. So I have set your cart to float to the left of your navbar toggler initially on mobile. Then once the width reaches the lg breakpoint, I change the positioning of the cart to be absolute and set it to the far right of the navbar, while givng the navbar some room with pr-lg-5
#media (min-width: 992px) {
.moving-cart {
position: absolute;
right: 0;
transform: translateY(-50%);
}
}
.moving-cart {
font-size: 24px !important;
margin-right: 15px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light pr-lg-5">
<a class="navbar-brand" href="#">Navbar</a>
<i class="fa fa-shopping-cart moving-cart" aria-hidden="true"></i>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
It looks bit hacky, but see if it works for you.
.collapsed-right {
display: flex;
align-items: center;
}
.fa-shopping-cart {
display: none;
}
#media(max-width: 991px) {
.d-small {
display: inherit
}
}
#media(min-width: 992px) {
.d-large {
display: inherit
}
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapsed-right">
<i class="fa fa-shopping-cart d-small" style="font-size: 24px; margin-right: 5px;" aria-hidden="true"></i>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<i class="fa fa-shopping-cart d-large" style="font-size: 24px; margin-left: 5px;" aria-hidden="true"></i>
</nav>
I want to know how to move the nav bar to the right. As of now, with the current HTML I have posted, it displays all of the items in the navbar to the left. I would like to place some of the items to the right but I am not sure how to do this. For example, should I use CSS? Or should I use a keyword in bootstrap? Please note that I am using bootstrap.
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="index.html">Store Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarsExampleDefault">
<ul class="navbar-nav mr-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="register.html">Create Account</a>
</li>
</ul>
<div class="navmoveright">
<form class="form-inline my-2 my-lg-0" id="navmoveright">
<input class="form-control mr-sm-2" name="username" type="text" placeholder="Enter Username" aria-label="Enter Username">
<input class="form-control mr-sm-2" name="password" type="password" placeholder="Enter Password" aria-label="Enter Password">
<button class="btn btn-outline-success my-2 my-sm-0" name="submit" type="submit">Login</button>
<ul class="nav navbar-nav navbar-right mr-auto" id="navmoveright">
<li>
<a href="#">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Cart (0)</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
CSS
.navmoveright{
float:right;
position:fixed;
top:0px;
right:0px;
text-align: right;
}
add this css
.navmoveright
{
float:right;
}
i hope this will helps
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
It appears that the issue was with the two CDN'S that I had placed. After I deleted the 4.0 version the code and syntax was able to work the way it is suppose to. In other words the two cdn's seemed to be conflicting with each other.