I have this navbar below and I'd like to make the search field in the form full width, so it expands as much of the navbar as possible without pushing anything else out of the way.
How would I do this?
I've tried a couple of different things like setting the width of different elements but nothing seems to work.
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" [routerLink]="['/home']">Web App</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="test">
<ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/register']">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/login']">Login</a>
</li>
</ul>
</div>
</div>
</nav>
This can be achieved with display:flex; and wrapping the relevant elements in divs. I set the first and second div to flex-shrink:1;, which means they shrink to the content of the div. Then I have added flex-grow: 1;to the second div so it fills the remaining space.
I also added width:100%; to the input field.
.flex {
display:flex;
}
.flex > div {
padding:0 5px;
flex-shrink:1;
}
.flex > div:nth-child(2) {
flex-grow: 1;
}
input {
width:100%;
}
.collapse {
display:none;
}
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container flex">
<div>
<a class="navbar-brand" [routerLink]="['/home']">Web App</a>
</div>
<div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false"> <span class="navbar-toggler-icon">Menu</span> </button>
<div class="collapse navbar-collapse" id="test">
<ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/register']">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/login']">Login</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Add with and float on the below element:
<ul class="navbar-nav mr-auto">
CSS:
width: 100px;
float: right;
The float you set does not work as the width of the element is 100%. You can also set text-align: center but depends how you want your text starts.
To align it properly now, use margin-right and margin-left to display it right where you want.
Edit:
To have full width search bar:
form, input {
width: 100%;
}
Edit 2:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<div class="row w-100">
<a class="col-2 navbar-brand" [routerLink]="['/home']" style="max-width:100px">Web App</a>
<form class="col form-inline">
<input class="form-control mr-sm-2 w-100" type="search" placeholder="Search" aria-label="Search">
</form>
<button class="col-1 navbar-toggler" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false" style="min-width:50px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-1 collapse navbar-collapse" id="test">
<ul *ngIf="!loggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/register']">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/login']">Login</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Related
This is what I have done so far for the navbar
I need to put a search icon beside log in button. When I click the search icon, a search box will appear under the navbar that look something like in the picture below. My navbar is transparent, position is relative and the header beneath is a video loop with autoplay, position is relative.
Taken from DataCamp website
I have tried free templates codes from other sites but it will give weird results when combined with my existing code and I have tried to change the template codes, still negative results. If possible I want to minimize the usage of js and css so that I can tweak the look easily without hassling too much. Thank you for the help.
You just need to position the search box under the navbar. Then add a class that will make it visible and add and event listener to the button that toggles that class on and off.
See snippet below
document.querySelector(`#btn-search`).addEventListener(`click`, function() {
document.querySelector(`#search`).classList.toggle(`show-search`);
});
#search {
bottom: 0;
right: 0;
width: 25%;
z-index: -1;
transition: transform 500ms;
position: absolute;
}
.show-search {
transform: translate(0, 100%);
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css' integrity='sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==' crossorigin='anonymous' />
<nav class="navbar navbar-dark navbar-expand bg-dark py-3 position-relative">
<div class="container">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#">First Item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Second Item</a>
</li>
</ul>
<div class="d-block">
<input type="search" id="search" class="form-control position-absolute shadow-sm" placeholder="Search">
<a class="btn btn-light me-2" role="button" id="btn-search" href="#">🔎</a>
<a class="btn btn-primary" role="button" href="#">Login</a>
</div>
</div>
</nav>
You could also use the off-canvas component baked into bootstrap: https://getbootstrap.com/docs/5.2/components/offcanvas/
See off canvas snippet below
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css' integrity='sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==' crossorigin='anonymous' />
<nav class="navbar navbar-dark navbar-expand bg-dark py-3 position-relative">
<div class="container">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="#">First Item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Second Item</a>
</li>
</ul>
<div class="d-block">
<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">🔎</button>
<a class="btn btn-primary" role="button" href="#">Login</a>
</div>
</div>
</nav>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<input type="search" id="search" class="form-control shadow-sm" placeholder="Search">
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.bundle.min.js' integrity='sha512-1TK4hjCY5+E9H3r5+05bEGbKGyK506WaDPfPe1s/ihwRjr6OtL43zJLzOFQ+/zciONEd+sp7LwrfOCnyukPSsg==' crossorigin='anonymous'></script>
You need a flag shouldShowSearchInput. By default, it should be false.
You can use it to change display of Search Input Element to be none or block
When you click SearchIcon changes the value of that flag.
this is my code on bootstrap for navbar but it is not getting fit proper as u can see in png
it is coming at the center of the page i want it to cover the whole page .enter image description here
Brand
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav">
Home
Profile
<div class="nav-item dropdown">
Messages
<div class="dropdown-menu">
Inbox
Sent
Drafts
</div>
</div>
</div>
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" />
<div class="input-group-append">
<button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav">
Login
</div>
</div>
</nav>
Here is an example.
In the example below I use container-fluid with a margin of 0 and padding of 0.
(You can do it without container-fluid wrapping your navbar, it is your choice for the sake of an example I will leave it in the snippet.)
Then if you want to put content inside of the navbar inside of the container. You can put div with a class of a container after starting the nav tag.
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
body {
background: #121212;
}
</style>
</head>
<body>
<div class="container-fluid m-0 p-0">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Brand</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>
</div>
</nav>
</div>
</body>
I am having some problems on the best way to order items correctly for desktop and mobile.
On the desktop mode I want to have (which is currently working):
search on the left
However, for mobile, I want to have:
hamburger icon in default position on the left, which currently is
search on the right, which currently is
brand in the center, but its not centering no matter what I do.
Can someone point out what I am doing wrong here? I am using flex ordering and margin autos to position the items, but the brand in mobile is refusing to position in the center.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-lg-fill">
<form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a>
</div>
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
The below code now works on mobile
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div><a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a></div>
<div class="d-flex flex-lg-fill">
<form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
Simply I have adjusted the navbar-brand using css to visible center. The search form will go down when smaller screen to avoid overlap with the logo. I hope this will work for you. If you need any further assistance drop your comment below.
.navbar-dark .navbar-brand {
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5px;
}
#media (max-width: 659px) {
.w-full {
width: 100% !important;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline w-full mt-2 mt-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>
<a class="navbar-brand mx-auto" href="">Brand</a>
<div class="collapse navbar-collapse" id="collapse-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
I am trying to create sticky header but when I am scrolling down jQuery addClass function is not working I have also tried with $(this) but it is also not working. I am trying to add another class while scrolling but it is not working. I want to change the background color of the header
this is my HTML code
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".myNavigation");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
});
.active {
background: #147cc4 !important;
color: #fff !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md fixed-top navbar-dark mb-4 myNavigation">
<div class="container">
<div class="col-md-2">
<ul class="navbar-nav mr-auto">
<form class="form-inline navbar-form" role="search">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</ul>
</div>
<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" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="logoFont">Hifzil</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link">Login</a>
</li>
<li class="nav-item">
<a class="nav-link">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
And this is the css class in which i have changed the background colors
Problem:- In your case $(this) refers to window not .myNavigation.
Solution :-
$(this).addClass("active");
$(this).removeClass("active");
Need to be:-
objectSelect.addClass("active");
objectSelect.removeClass("active");
Working snippet:- https://jsfiddle.net/7ko4k75t/
The conditional statement behaves as expected, although consider using the .addClass() method with the variable objectSelect - which has already defined the element that will require the class change (.myNavigation).
$(this), in this case, is being used incorrectly, in regards to the scope, this refers to the window defined in the selector range of the .scroll() method.
Code Snippet Demonstration:
Note: console logging added to demonstrate when state changes occur
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".myNavigation");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(objectSelect).addClass("active");
console.log('this:',$(objectSelect).attr('class'));
} else {
$(objectSelect).removeClass("active");
console.log('this:',$(objectSelect).attr('class'));
}
});
});
.active {
background: #147cc4 !important;
color: #fff !important;
}
html {
min-height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md fixed-top navbar-dark mb-4 myNavigation">
<div class="container">
<div class="col-md-2">
<ul class="navbar-nav mr-auto">
<form class="form-inline navbar-form" role="search">
<div class="search">
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</ul>
</div>
<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" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="logoFont">Hifzil</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link">Login</a>
</li>
<li class="nav-item">
<a class="nav-link">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
Simple solution on pure JS:
var
head = document.getElementsByClassName('myNavigation')[0];
function stickyHeader() {
if (window.pageYOffset > 150) {
head.classList.add('active');
}
else if (window.pageYOffset <= 150) {
head.classList.remove('active');
}
}
window.addEventListener('scroll', function () {
stickyHeader();
});
I'd like to create a site header like the one on stackoverflow..
I am using bootstrap but can't seem to get the header elements to appear on a single line.
Anyone have any ideas how I can achieve this?
Here is the jsfiddle - https://jsfiddle.net/31wxk9ak/2/ . depending on the size of your screen you may need to adjust the page split on this page in order to prevent you browser from stacking the elements.
Desired layout
Here is the code:
<html><head></head><body>
<div id="root">
<div data-reactroot="" class="container fill">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar"><span
class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="/">Home</a></div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a title="About" href="/about">About</a></li>
<li><a title="Contact" href="/contact">Contact</a></li>
<li>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="input-group"><input type="text" class="form-control"
placeholder="Search..."
value=""><span class="input-group-btn"><input
type="button" class="btn btn-default" value="Go!"></span></div>
</div>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<link rel="stylesheet" href="assets/lib/bootstrap/3.3.7/css/bootstrap.min.css">
https://oss.maxcdn.com/respond/1.4.2/respond.min.js'>
You are not implementing the navbar properly, use a form for the search box.
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
<li id="nav-login-btn"><a title="Login" class="animate" href="/login">Login</a></li>
<li id="nav-login-btn"><a title="Register" class="animate" href="/register">Register</a></li>
</ul>
JSFiddle Demo
Reference:
Bootstrap Navbar
There's obviously many ways to do this, but I'll just show a couple. The first one uses floating, simply apply this to all navbar headers.
.navBarHeader {
float: left;
}
Alternately, you can use inline-block.
.navBarHeader {
display: inline-block;
}