This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I'm very new to bootstrap so this is probably an easy question for most. I have a navbar, want two nav items and an input field to be on the left side of the navbar. With the two remaining nav items on the right. I have tried messing with the classes to make this happen and using the "float-left" and "float-right" classes but no joy :(
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">L'amour</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item float-left">
<a class="nav-link float-left" href="order.php">Contact Us</a>
</li>
<li class="nav-item float-left">
<a class="nav-link float-left" href="order.php">Testimonial</a>
</li>
<li class="nav-item">
<input class='form-control' type='text' name='search' placeholder='Search for wedding...'>
</li>
<li class="nav-item float-right">
<a class="nav-link float-right" href="order.php">Order Wesbite</a>
</li>
<li class="nav-item dropdown float-right">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="signIn.php">Login</a>
<a class="dropdown-item" href="sign-up">Sign up</a>
<a class="dropdown-item" href="homeUser.php">Account details</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
You can use the following solution:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">L'amour</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!-- left menu -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="order.php">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="order.php">Testimonial</a>
</li>
<li class="nav-item">
<input class='form-control' type='text' name='search' placeholder='Search for wedding...'>
</li>
</ul>
<!-- right menu -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="order.php">Order Wesbite</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="signIn.php">Login</a>
<a class="dropdown-item" href="sign-up">Sign up</a>
<a class="dropdown-item" href="homeUser.php">Account details</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Separate menu into two ul left and right use class mr-auto for left and my-0 for the right one
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">L'amour</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item float-left">
<a class="nav-link float-left" href="order.php">Contact Us</a>
</li>
<li class="nav-item float-left">
<a class="nav-link float-left" href="order.php">Testimonial</a>
</li>
<li class="nav-item">
<input class='form-control' type='text' name='search' placeholder='Search for wedding...'>
</li>
</ul>
<ul class="navbar-nav my-lg-0">
<li class="nav-item ">
<a class="nav-link float-right" href="order.php">Order Wesbite</a>
</li>
<li class="nav-item dropdown float-right">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="signIn.php">Login</a>
<a class="dropdown-item" href="sign-up">Sign up</a>
<a class="dropdown-item" href="homeUser.php">Account details</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
https://jsfiddle.net/raj_mutant/v00oy85h/
To achieve this you should wrap your nav items in different ul
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.php">L'amour</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item float-left">
<a class="nav-link float-left" href="order.php">Contact Us</a>
</li>
<li class="nav-item float-left">
<a class="nav-link float-left" href="order.php">Testimonial</a>
</li>
<li class="nav-item">
<input class="form-control" type="text" name="search" placeholder="Search for wedding...">
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="order.php">Order Wesbite</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="signIn.php">Login</a>
<a class="dropdown-item" href="sign-up">Sign up</a>
<a class="dropdown-item" href="homeUser.php">Account details</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Note: View the snippet in full screen
You are forgetting to use clearfix class to parent class that contain float-left or float-right class
Related
I copied everything from Bootstrap, but my navbar stays collapsed on mobile and tablet. When i click the icon, there is a movement, like they try to go up and down.
I attached the code below :
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="container-fluid ">
<!-- <a class="navbar-brand" href="#">Navbar</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 d-flex justify-content-center" id="navbarNav">
<ul class="navbar-nav my-5 fs-5">
<li class="nav-item me-5">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item me-5">
<a class="nav-link" href="#">Tour List</a>
</li>
<li class="nav-item me-5">
<a class="nav-link" href="#">Tour Search</a>
</li>
<!-- LOGO -->
<img src="/images/Landing-logo.png" width="125px" alt="">
<!-- LOGO -->
<li class="nav-item ms-5">
<a class="nav-link" href="#">Desinations</a>
</li>
<li class="nav-item ms-5">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item ms-5">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
this is code snippet for responsive navbar you can adjust it accordingly.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<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>```
I am using bootstrap to implement a toggling navbar. On smaller screens, it toggles, but when I click the icon the navbar appears and disappears after one second. Can anyone help?
I will share the nav bar code below. As you can see I have added the necessary classes but still, the navbar disappears after one second on a smaller screen. I am new to bootstrap. Please help me
<nav class="navbar navbar-expand-sm fixed-top navbar-default">
<div class="navbar-header ">
<span class="navbar-brand"> <img class="rounded d-inline-block align-top "src="./mr.jpg" height="30px" width="30px" >HARISH</a></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="container">
<button class="navbar-toggler collapsed navbar-light " type="button" data-toggle="collapse" data-target = "#navbar" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-toggleable" id="navbar">
<ul class=" nav navbar-nav ">
<a class="nav-item nav-link a-style" href="#">Reviews</a>
<a class="nav-item nav-link a-style" href="#">About us</a>
<a class="nav-item nav-link a-style" href="#">FAQ</a>
</ul>
</div>
</div>
</nav>
Try This...
<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="#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 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I have a bootstrap nav bar, and I would like to have both collapse-able and non collapse-able menu items.
my code is as follows:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="https://ngohub.asia">
<%= image_tag 'ngohublogo.png', class: 'hidden-md-down img-responsive', style: 'width: 100%'%>
<%= image_tag 'ngohublogo.png', class: 'hidden-lg-up img-responsive w-100'%>
</a>
<div class="w-100" style="float:right;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The login and sign up links appear as expected to the left of the brand,
however when I decrese the size of the browser window to simulate a mobile device, the links aren't sharing space with the brand as I would like:
Here it is on a full width screen
here it is in a simulated mobile view. I would like login and sign up to be next to the brand and next to the hamburger
First thing of note, visibility helpers have been renamed in the latest version of bootstrap. hidden-md has been replaced with .d-md-none, etc.
Second, I made sure to declare flex-direction: row; on .navbar-nav to arrange it's children horizontally instead of vertically.
.navbar .navbar-nav{
flex-direction: row;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="https://ngohub.asia">
<img src="https://via.placeholder.com/200x50" class="hidden-md-down img-responsive" style="width: 100%" />
</a>
<div style="float:right;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
There are a few different ways you can approach this. Remember that in Bootstrap 4.1, the navbar-toggleable classes have been replaced with navbar-expand-.
Use flex-row on the first navbar-nav so that it doens't wrap/stack in a column on smaller screens. Use flex-grow-1 on the collapse so that it expands the remaining width.
Demo: https://www.codeply.com/go/LBY9LXio09
<nav class="navbar clg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://ngohub.asia">
<img src="//placehold.it/40?text=sm" class="d-lg-none d-inline">
<img src="//placehold.it/100x30?text=lg" class="d-lg-inline d-none">
</a>
<div class="mr-auto flex-shrink-1">
<ul class="navbar-nav flex-row">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item px-1">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 flex-grow-1" id="navbarSupportedContent">
<ul class="navbar-nav ml-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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline d-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>
</nav>
I have a bootstrap 4 navigation bar.In this navigation bar i have a font awesome icon-shopping cart that i don't want to toggle(to go in that 3 lines menu) when the page pass a max-width value(the default responsive navbar from bootstrap).I would like to remain near the menu bar.How can i do this?
PS:I will put three ! where the font awesome icon is to help you seeing it.
HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
!!!<i class="fas fa-shopping-cart fa-lg" style="color: white;"></i>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
You need to group the non-collapsible items in a single div, and then use the spacing and order utilities to align it as needed.
https://www.codeply.com/go/SJia0JtI1T
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">English Park Cuisine</a>
<div class="d-flex order-lg-1 ml-auto pr-2">
<i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
<ul class="navbar-nav flex-row">
<li class="nav-item mx-2 mx-lg-0">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
</div>
</nav>
Related: Bootstrap 4 - Navbar items outside the collapse
Move your shopping cart outside of the nav collapse div and nest it and the nav collapse in a new div. Then style the shopping cart accordingly, but it won't go away with the nav collapse.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.php">English Park Cuisine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div> <!-- New Div !-->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Meniu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="meniu.php">Pizza</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Supe</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Desert</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<p class="dropdown-item">0746117702</p>
<p class="dropdown-item">0742112452</p>
<p class="dropdown-item">0735212352</p>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
<!-- move the anchor outside of the original div but nested inside the new div !-->
!!!<i class="fas fa-shopping-cart fa-lg" style="color: white;"></i>
</div>
I've been trying to overwrite the font color of my navbar but I can't seem to figure it out. I want the background color orange, and the font color white.
HTML for navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Rocalytics</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 active">
<a class="nav-link" href="#">Value Proposition</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Scheduling</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact Management</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Analytics</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">User Experience</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
</nav>
CSS:
/* NAVBAR */
.navbar {
background-color: #f78c20 !important;
color: white !important;
}
The background color manages to change, the font color doesn't. I'm also trying to avoid using !important. Any suggestions?
You can add class to more specific tag like nav-link,dropdown-item
/* NAVBAR */
.navbar {
background-color: #f78c20 !important;
color: white;
}
.nav-link,
.dropdown-item {
color: white;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Rocalytics</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 active">
<a class="nav-link" href="#">Value Proposition</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Scheduling</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact Management</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Analytics</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">User Experience</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Sign Up</button>
</form>
</div>
</nav>