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>
Related
I've been trying to solve this but can't seem to figure it out.
The problem I have is that whenever I try to see the navbar in inspect - the navbar display changes to none automatically when the screen width is lower than 768.
I've also tried to use the toggler for mobile view, but still it doesnt work.
useful screenshots for better understanding:
https://imgur.com/a/6ejUEwM
my navbar is the first navbar from the following link
https://getbootstrap.com/docs/4.0/components/navbar/
<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>
To inspect pages without changing the page width, just dock the devtools to bottom.
nav bar is not loading in bootstrap4
one more project container of bootstrap4 is not loading.rows are coming one after the other rather to come side by side .how i can fix this problem?
<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="#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>
If you copied from the source of an example, pay attention to the source, because outside bootstrap.min.css or whatever, there's another css specific to that template. Also copy that one.
How do i increase the size of the Bootstrap nav bar so that it takes up the entire screen? Right now it only takes half the screen in desktop view however it does work fine with mobile optimization
<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container-fluid"</div>
<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>
</div>
</body>
you will see it in bigger screen
1. add css to body width:100%;
2. remove the unnecessary </div> (after </nav>)
maybe you should add media-query:
#media only screen and (max-width: 480px) {
body{
width:100%;
}
}
but It works fine (without media-query):
body{
width:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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="container-fluid"</div>
<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>
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
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>