I have a page with a navbar.
I want to add a responsive background image to the page (not the navbar).
If I set the page to 100% height it overflows the page with a scrollbar.
How should this be accomplished? I have no idea.
.bg {
/* The image used */
background-image: url("http://via.placeholder.com/350x150");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page">
<div class="bg"></div>
<div class="data">
bla bla bla
</div>
</div>
Edit: jsfiddle - JSFIDDLE
You can use the Bootstrap 4 flexbox utils, and add flex:1 1 auto to the main-page so it fills the height (with no scrolling).
https://www.codeply.com/go/isN2cS0m0q
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
min-height: 100vh;
}
.flex-fill {
flex: 1 1 auto;
}
.bg {
background-image: url("http://placehold.it/350x150");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body class="d-flex flex-column">
<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page d-flex flex-column flex-fill">
<div class="bg flex-fill"></div>
<div class="data">
bla bla bla
</div>
</div>
</body>
Note: The flex-fill class will be included in Bootstrap 4.1 so the extra CSS for flex-fill will no longer be needed when 4.1 is released.
Related questions:
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4: How to make the row stretch remaining height?
Add the following css rule to your .bg class:
height: calc(100vh - 56px)
That will calculate the height (100% viewport height minus 56px for the height of the navbar).
Working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<style>
.bg {
/* The image used */
background-image: url("http://via.placeholder.com/350x150");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh - 56px);
}
</style>
<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page">
<div class="bg"></div>
<div class="data">
bla bla bla
</div>
</div>
Related
I am using Bootstrap 4 and trying to make a nav-item have the same height as my navbar so that when I add background-color to it it looks like a stripe through the nav-bar.
Initially the item was centered and left space on top and below. I added negative margin to get it up against the top but the same didn't work when I tried to add "margin-bottom"
I then tried fixing the height of the navbar but when I did that and clicked on the toggle to bring down the navbar items they didn't show up because the fixed height prevented it from appearing.
<body>
<nav class="navbar navbar-dark bg-dark text-center">
<div class="container">
<div class="mr-auto order-0" class= "d-flex align-items-stretch">
<a class="navbar-brand ml-auto" style="background-color:red; line-height: 58px; margin-top:-9px; padding: 0 20px 0 20px;" class="nav-item active" href="#">Matthew Krebs</a>
</div>
<a class="navbar-brand text-center" href="#"></a>
<button class="navbar-toggler" 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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
Here you go!
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav style="padding-top: 0px; padding-bottom: 0px;" class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script>
document.querySelectorAll(".nav-item").forEach(item => {
item.style.height = document.getElementById("navbar").offsetHeight;
item.style.backgroundColor = 'aqua';
item.style.marginRight = '5px';
})
</script>
</body>
</html>
A few things:
I changed the inline CSS to a separate class just for the red background
added the nav-link class so that you can see the behavior of the nav-item on the top and those which are revealed upon clicking the burger menu
the navbar class had a padding which we had to overwrite to take care of the stripe look
make sure that your CSS is loaded after bootstrap, so that you can override it without using !important
working snippet below:
<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>
<nav class="navbar navbar-dark bg-dark text-center">
<div class="container">
<div class="mr-auto order-0" class="d-flex align-items-stretch">
<a class="nav-item nav-link my-custom-style" href="#">Matthew Krebs</a>
</div>
<a class="navbar-brand text-center" href="#"></a>
<button class="navbar-toggler" 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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<style>
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* just to highlight our nav-item */
.my-custom-style {
background-color: red;
}
.nav-link {
border: 1px dotted yellow;
}
</style>
The desired effect can be achieved by simply removing the padding from the <nav> element. The easiest way to do this is to add the p-0 class to the <nav>. Bootstrap includes several margin and padding utility classes. Read about them here.
<nav class="navbar navbar-dark bg-dark text-center p-0">
<div class="container">
<div class="mr-auto order-0" class="d-flex align-items-stretch">
<a class="navbar-brand ml-auto"class="nav-item active" href="#">
Matthew Krebs
</a>
</div>
<button class="navbar-toggler" 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 mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
Codepen example.
I have a simple main header which contains a navbar , I want to change the alignment of the right side of the image.
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Here is what I have :
as you can see there is space on the right side of header and left side, I want the image to float right side and remove that space on the right side, but left side should have that white space.
Here is what I want:
what am I missing in my code?
You can use edge offset values on the background-position property.
By using a negative value we can offset the image further towards the right of the page, giving you the effect you are looking for.
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: right -190px bottom;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
By adding a couple div
Added marketing-main-header_banner_image to hold the image that can be bigger than marketing-main-header_banner.
Added nav-holder to place the navbar-toggler button in the correct place.
html,
body {
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner {
overflow: hidden;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
.marketing-main-header_banner_image {
overflow: visible;
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 2000px;
}
.nav-holder {
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
width: 1700;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<div class="marketing-main-header_banner_image">
<div class="nav-holder">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
I use fluent kit with bootstrap 4.1.2.
From the navbar docs (I want this one because the toggler changes its icon on open / close) I did take the second example, from the #position section. However, the hamburger is not centered vertically. How can I fix it?
Navbar with wrong hamburger:
I tried removing padding but it didn't help and I am stuck.
<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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/js/fluent-kit.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark py-2">
<strong class="navbar-text">
Navbar position example
</strong>
<button class="btn mi navbar-toggler shadow-none mt-0" type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navbar submenu</span>
</button>
<div class="collapse navbar-collapse" id="navbar-position">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Remove .btn class from the <button>
<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.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.3.0/js/fluent-kit.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit#1.2.0/css/fluent-kit.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark py-2">
<strong class="navbar-text">
Navbar position example
</strong>
<button class="mi navbar-toggler shadow-none mt-0" type="button" data-toggle="collapse" data-target="#navbar-position" aria-controls="navbar-position" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navbar submenu</span>
</button>
<div class="collapse navbar-collapse" id="navbar-position">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Add this css code in your css file:
nav.navbar .navbar-toggler {
line-height: 10px;
padding: 0;
}
you can also use transform:translateY to align
.navbar .navbar-toggler {
transform: translateY(-17%);
}
Add this css in your css file.
.navbar .navbar-toggler {
padding: .5rem .75rem;
}
I have the following code using bootstrap navbar. But I want to make the anchor tags move the right side when one is seeing them full screen on laptop. How do I do that? If you can please show the CSS as well. Thank you!
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">J & M Residential Cleaning Services</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
To align the text to the right in the dropdown, set text-align: right on .navbar-collapse:
.collapse.navbar-collapse {
align-items: flex-end;
flex-direction: column-reverse;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">J & M Residential Cleaning Services</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
If instead you'd like to align the row of links in the expanded view, things get a little more complicated. Bootstrap 4 has switched to a flexbox layout, and as such, you'll need to target .collapse.navbar-collapse, setting align-items to flex-end and change the flex-direction to column-reverse:
.collapse.navbar-collapse {
align-items: flex-end;
flex-direction: column-reverse;
}
This can be seen in the following (click Run code snippet then Full page):
.navbar- {
text-align: right;
}
.collapse.navbar-collapse {
align-items: flex-end;
flex-direction: column-reverse;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">J & M Residential Cleaning Services</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
I put brand on center navbar and i want to have navigation to left side and navigation to right side. All this work good but i have question how to align left and right navigation center like on screenshot belowe.
Here is my code:
.navbar {
position: relative;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="img/profile.png" width="250" />
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<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>
<ul class="nav navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
</nav>
Hi you can try doing this to achieve what you wanted.
First remove the class .mr-auto on your <ul class="navbar-nav"> and then add
a class .custom-css to <div class="collapse navbar-collapse custom-css" id="navbarSupportedContent"> since .navbar-collapse is already set to display:flex, we will now just set the justify-content: space-around; to the .custom-css
Please see the code below.
.navbar {
position: relative;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
.custom-css{
justify-content: space-around;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="img/profile.png" width="250" />
</a>
<div class="collapse navbar-collapse custom-css" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<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>
<ul class="nav navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
</nav>
Hope this helps
you have 2 ul classes , combine all elements in one class and then use Div class Container and then use justify content=centre to bring all elements in center. please see below code.
.container {
display: flex;
align-content: center;
justify-content: center;
height:150px;
}
.brand {
position: fixed;
top: 23%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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">
<div class="container">
<ul class="nav navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">3</a>
</li>
</ul>
</div>
</div>
</nav>
Run code snippetReturn to post
</body>
</html>
It would be better (and responsive) to make 2 collapsible navs to the left and right of the logo...
https://www.codeply.com/go/8xMhvER5At
<nav class="navbar navbar-expand-lg navbar-dark bg-dark position-relative">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<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 class="mx-auto order-0 mt-lg-5 mt-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/250" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-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>
<li class="nav-item">
<a class="nav-link" href="#">Контакт</a>
</li>
</ul>
</div>
Then you only need a little CSS for the nav height:
#media (min-width: 992px) {
.navbar {
height:150px;
}
}