I have header with top-bar and nav using bootstrap 4.
HTML:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<header class="fixed-top">
<div class="top-bar">
<div class="container">
top bar
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Fixed navbar</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" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section id="intro">
<div class="container">
<div class="jumbotron">
<div class="container">
<h2>Test</h2>
<h1>Lorem Ipsum</h1>
<h4>Lorem Ipsum</h4>
</div>
</div>
</div>
</section>
</body>
I add fixed-top class on header, Now In action header is over of section and section not show after header. how do can i show section after header block?!
demo here
Related
I am practicing how to create a navbar using Bootstrap 5 and can't get the links centered and below the navbar-brand.
I've attach an image of my current navbar.
Screenshot
My script:
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border:3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </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>
<div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
<unli class="navbar-nav">
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
</li>
</unli>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color:#C58940" type="submit">Search</button>
</form>
</div>
</div>
</nav>
I've tried using justify-content-center in
I'm not sure what I'm doing wrong.
Any help/advice would be appreciated.
Thanks!
Add justify-content-center to the navbar-collapse.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg flex-column align-items-stretch" style="background-color: #FAF8F1; border:3px solid;">
<div class="d-flex">
<a class="navbar-brand mx-sm-auto mr-auto" href=""> Honeybee Babies </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>
<div class="collapse navbar-collapse w-100 justify-content-center" id="navbarSupportedContent">
<unli class="navbar-nav">
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Baby Essentials</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Price Range</a>
</li>
<li class="nav-item rounded-pill" style="background-color:#C58940;">
<a class="nav-link" style="color:#FAF8F1" href="">Brands</a>
</li>
</unli>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn" style="color:#C58940" type="submit">Search</button>
</form>
</div>
</nav>
I have problem in 2 things:
How do I Make the search bar in left on desktop side as shown here and how to avoid This
On small devices?
When the display is small, it shows a button to display the list, but when I click the button, nothing happens
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="App">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<a class="navbar-brand" href="#">Brand Name</a>
<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="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<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>
</nav>
</div>
What I tried:
1: I tried using css text-align: left and it doesen't work
You could use some css to add flex-grow and a max-width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AA</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="App">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="flex-wrap: nowrap;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<a class="navbar-brand" href="#">Brand Name</a>
<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="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<form class="form-inline my-2 my-lg-0" style="flex-grow: 1; max-width: 300px; width: auto; flex-wrap: nowrap;">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" style="flex-grow: 1;">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
</body>
</html>
I am trying to add a Login button to my navbar in bootstrap, but when I add col-x to separate them equally, but they just cover 50% of the width of the navbar and nothing more. But when I use col-x outside then navbar it works perfectly.
The code
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row">
<div class="col-4">
<a class="navbar-brand" href="#">
<h1 class="display-3">Petitions</h1>
</a>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-lg">
Get Started
</button>
</div>
<div class="col-4">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div></div>
</div>
</div>
</nav>
<!-- Navigation -->
I Think you want to make something like this:
<nav class="navbar navbar-dark navbar-expand-md sticky-top" style="background-color: #000000;">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px;">
<div class="col-4">
<a class="navbar-brand" href="#">
<h1 class="display-3">Petitions</h1>
</a>
</div>
<div class="col-4">
<button type="button" class="btn btn-primary btn-lg">
Get Started
</button>
</div>
<div class="col-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div></div>
</div>
</div>
</nav>
I try to make a website in Boostrap 4, but I faced into a problem. I try to explain what I need.
A fixed to top navbar with 2 rows, but here comes the trick. Upper bar contains 2 logos (one on the left side and one on the right side, in the same row.
The second row contains only links, but ordered to center. Hopefully, my description not so misunderstandible.
Thanks for your help!
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</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" id="navbarCollapse">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="row d-flex w-100 justify-content-between" >
<img class="" style="width: 3rem" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/1024px-Bootstrap_logo.svg.png" />
<img class="" style="width: 3rem" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/1024px-Bootstrap_logo.svg.png" />
</div>
<div class="row w-100 ">
<ul class="d-flex list-unstyled mx-auto w-25 justify-content-between">
<li class="">My links </li>
<li class="">My links </li>
<li class="">My links </li>
</ul>
</div></nav>
Is it what you are looking for?
I am trying to remove the padding between menu and navbar margin. I cant seem to find an answer.
header nav #logo {
padding: -10px; }
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: red;">
<a class="navbar-brand" href="#">
<img id="logo" src="images/logo.png" width="60" height="60">
</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">
<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="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
Use the Bootstrap 4 spacing utilites for padding.
Decrease Padding Navbar Example
py-0 sets vertical (y-axis) padding to 0.
<nav class="navbar navbar-dark py-0 bg-primary navbar-expand-lg">
<a class="navbar-brand" href="#">Logo</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-0">Link</li>
</ul>
</div>
</nav>
In my case it was not the nav that had the pading, it was the body. To the body I put py-0 in his class and ready