Using Bootstrap 4, I have set up a progress bar, located under the navbar, that displays how far down the page you have scrolled. However, I am having an issue with the formatting. Specifically, there is a space between it and the left side of the page. Please see below:
My html code is:
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
For my css:
body {
padding: 0 2%;
}
.progress {
margin-top: 1rem;
background-color: transparent;
}
.progress-bar {
position: fixed;
height: 2rem;
color: white;
font-weight: $fw-700;
font-size: $fs-200;
z-index: 1000;
}
In addition, all content is contained in section tags, with the class of content, that has the following formatting:
.content {
padding: 2rem;
font-family: "Quicksand", sans-serif;
font-size: clamp(2.1rem, 2.3rem, 2.5rem);
font-weight: 500;
position: relative;
border: 5px solid #090160;
border-radius: 25px;
background-color: #f9fafb;
-webkit-box-shadow: 1rem 1rem 1rem #d4d1ff;
box-shadow: 1rem 1rem 1rem #d4d1ff;
}
I hav also tried setting using:
<div class="row justify-content-center">
<div class="col-12"></div>
</div>
and adjusting the width of the column (col-10, col-8 for example) with no change.
How to I format the progress bar so it stretches across the entire page or is the width of the sections that follow it?
Related
I have a simple question about the bootstrap navbar toggler. The toggler does appear when the window gets smaller, but when I click it the navbar doesn't appear. Wondering if someone could take a quick look at my code and point out something that might be missing. Relatively new to bootstrap so any help is much appreciated !! (I also followed all the setup instructions on integrating bootstrap so that also shouldn't be an issue here).
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand">MY NAME HERE</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/home">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blogs">Blogs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blogs">LinkedIn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</nav>
nav {
background-color: white;
padding: 70px !important;
width: 100%;
position: absolute;
}
a {
background-color: white;
}
div {
background-color: white;
}
.navbar-brand {
background-color: white;
font-family: orpheuspro, serif;
font-style: normal;
color: black;
font-size: 40px !important;
font-weight: 100;
letter-spacing: 3px;
}
.nav-link {
background-color: white;
float: right;
color: black;
font-family: orpheuspro, serif;
font-weight: 400;
font-style: normal;
font-size: 23px;
text-transform: uppercase;
}
This is the issue occurs when you don't import jquery with bootstrap. Bootstrap uses jquery for some features like toggle popup ,dropdowns and modals etc so it is must.
Please Install Jquery and import it in angular.json file.
I have the following HTML for a bootstrap navbar.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 33px;
padding-bottom: 20px;
}
.body {
font-size: 16px;
border-spacing: 2px;
border-collapse: separate;
text-align: center;
}
.body a {
text-decoration: underline;
}
.navbar-fixed-top {
background-color: #5b5b5b;
min-height: 33px;
border-style: none;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-nav>li>a {
line-height: 3px;
padding-top: 16px;
padding-bottom: 14px;
}
div.navbar-header>img {
height: 30px;
margin-top: 2px;
}
.nav>li>a {
font-size: medium;
font-family: "Helvetica Bold", sans-serif;
/*font-weight: bold;*/
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a {
color: #f0eed0;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #f8dc54;
}
.nav li {
display: inline;
}
#vugraph-menu.inprogress>a {
color: black;
background-color: #ecbe23;
}
#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="http://www.bridgebase.com/images/bbo_red.png">
<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>
</div>
<div id="navbar" class="nav navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify"></span></a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">Watch</li>
<li class="dropdown-item">Schedule</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
</ul>
</div>
</div>
</div>
</nav>
With no badge this looks like:
I have JavaScript that dynamically fills in the #vugraph-count badge. When it has contents, the height of the navbar increases by more than 15 pixels. The HTML becomes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 33px;
padding-bottom: 20px;
}
.body {
font-size: 16px;
border-spacing: 2px;
border-collapse: separate;
text-align: center;
}
.body a {
text-decoration: underline;
}
.navbar-fixed-top {
background-color: #5b5b5b;
min-height: 33px;
border-style: none;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-nav>li>a {
line-height: 3px;
padding-top: 16px;
padding-bottom: 14px;
}
div.navbar-header>img {
height: 30px;
margin-top: 2px;
}
.nav>li>a {
font-size: medium;
font-family: "Helvetica Bold", sans-serif;
/*font-weight: bold;*/
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a {
color: #f0eed0;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #f8dc54;
}
.nav li {
display: inline;
}
#vugraph-menu.inprogress>a {
color: black;
background-color: #ecbe23;
}
#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="http://www.bridgebase.com/images/bbo_red.png">
<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>
</div>
<div id="navbar" class="nav navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify">1</span></a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">Watch</li>
<li class="dropdown-item">Schedule</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
</ul>
</div>
</div>
</div>
</nav>
and the rendered navbar looks like:
(I had to put our custom CSS inline in the HTML box of the snippet, because otherwise bootstrap.min.css was taking priority over the custom styles.) You'll need to use the "Full page" option of the stack snippets to get the non-collapsed navbar.
The problem appears to be related to the .navbar-nav>li>a style line-height: 3px. When I remove that, the navbar is always too tall. This is being used to reduce the navbar height to match the logo on the left. For some reason, when the badge is added, it's overriding this (although it's not striked out in the DOM inspector).
The badge is not causing the problem, you can check next example with two navbars (one with badge filled with a number, other without it) where both have similar height (like Chris Bar already noted). So:
1) It could be a problem with some of your custom CSS, in this case, I recommend to use the inspector tool to check what style is added to your badge or navbar.
2) Another thing you could do is check if you have a well structured navbar as explained on Bootstrap Navbar.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar 1</a>
</div>
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Vugraph
<span id="vugraph-count" class="no-padding badge badge-notify">99</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">
Watch
</li>
<li class="dropdown-item">
Schedule
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<!-- Brand and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar 2</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Vugraph
<span id="vugraph-count" class="no-padding badge badge-notify"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">
Watch
</li>
<li class="dropdown-item">
Schedule
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a>
</li>
</ul>
</div>
</div>
</nav>
Finally, I don't believe that updating to Bootstrap 4 will help here, indeed, you will have to port your entire site to the new version because there are thing that changed from version 3 to 4 (Read more here).
Update
After the question was updated with the custom style applied on the elements, a possible solution is to add next style to the badge:
{line-height: 0; display: inline;}
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
#vugraph-count {
line-height: 0;
display: inline;
}
body {
padding-top: 33px;
padding-bottom: 20px;
}
.body {
font-size: 16px;
border-spacing: 2px;
border-collapse: separate;
text-align: center;
}
.body a {
text-decoration: underline;
}
.navbar-fixed-top {
background-color: #5b5b5b;
min-height: 33px;
border-style: none;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-nav>li>a {
line-height: 3px;
padding-top: 16px;
padding-bottom: 14px;
}
div.navbar-header>img {
height: 30px;
margin-top: 2px;
}
.nav>li>a {
font-size: medium;
font-family: "Helvetica Bold", sans-serif;
/*font-weight: bold;*/
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a {
color: #f0eed0;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #f8dc54;
}
.nav li {
display: inline;
}
#vugraph-menu.inprogress>a {
color: black;
background-color: #ecbe23;
}
#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="http://www.bridgebase.com/images/bbo_red.png">
<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>
</div>
<div id="navbar" class="nav navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify">1</span></a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">Watch</li>
<li class="dropdown-item">Schedule</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
</ul>
</div>
</div>
</div>
</nav>
Check out this quick test that measures the height of the nav items with and without a badge. There is a small difference, but not much. only 0.04 pixels.
You might have other CSS that is interfering and makes the badge a bit taller. If the padding or line-height of the .badge is made smaller, then the two nav items have the same height. See the commented out CSS code, uncommenting this fixes the issue in the demo here
document.querySelectorAll('.nav-item').forEach((el) => {
console.log(el.innerText + ' Height: ' + el.getBoundingClientRect().height + 'px')
});
.nav-item {
border: 1px solid red;
}
.nav-item .badge {
/*line-height: 90%;*/
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
<div id="navbar" class="nav navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">No Badge</a>
</li>
<li class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Has Badge <span id="vugraph-count" class="badge badge-notify">1</span></a>
</li>
</ul>
</div>
</div>
I am trying to make a search input with an embedded search icon work in Bootstrap 4 navbar when the mobile menu is displayed. Below is my Boostrap 3 version that worked pretty easily...
I have a very long 'mobile' menu due to the nature of the application so I want to apply a max-height and overflow-y to the navbar-collapse so it doesn't cover entire screen.
However, when I apply those styles in Boostrap 4, my search icon does not stay 'inside' the input:
The styles I have applied to my search inputs are:
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
I am able to make the search icon stay inside the input if I apply max-height/overflow-y styles to the entire .navbar element. But this is not the look I am going for, and worse, it allows the mobile togglerButton to be scrolled off the screen. I have made a fiddle that reproduces the error.
Fiddle
Add position: relative to has-search. Also apply max-height etc to navbar-collapse only in mobile view.
See demo below:
.has-search { /* ADDED */
position: relative;
}
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
#media (max-width: 991px) { /* ADDED */
.navbar-collapse {
max-height: 150px;
overflow-y: auto;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<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.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/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="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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
</div>
</nav>
<h1>Hello, world!</h1>
guys I'm having a problem in my navbar. In smaller screens the navbar don't span to full width. here's my code:
nav.navbar {
background-color: black;
/* top: 0;
margin: 0; */
padding-left: 0;
padding-right: 0;
width: auto;
box-sizing: border-box;
border-bottom: 5px solid #333333;
}
div.navbar-collapse {
background-color: black;
width: 100%;
white-space: nowrap;
}
<nav class="navbar navbar-expand-xl static-top">
<button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar mid"></div>
<div class="bar"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav options links">
<a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
</div>
</div>
</nav>
I've seen problems about this but nothing solved my problem. Seem's this problem is common when we use a static navbar.
thank you in advance! ;)
You need to set margin and padding to 0px for body tag.
Below is working demo:
body {
margin: 0;
padding: 0;
}
nav.navbar {
background-color: black;
width: auto;
box-sizing: border-box;
border-bottom: 5px solid #333333;
}
div.navbar-collapse {
background-color: black;
width: 100%;
white-space: nowrap;
}
<nav class="navbar navbar-expand-xl static-top">
<button class="navbar-toggler hamburguer" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar mid"></div>
<div class="bar"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav options links">
<a class="nav-item nav-link" href="https://www.sfdergedg.com/about.php">About</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/blog.php">Blog</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/media.php">Media</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/meet_the_dev.php">Meet the Dev!</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/support.php">Support</a>
<a class="nav-item nav-link" href="https://www.sfdergedg.com/contacts.php">Contacts</a>
</div>
</div>
</nav>
The problem is that below navbar I had an Image without width set. And as it was wider than the screen, the navbar didn't span at 100%. It fixed after I set the width of that Image to 100% or less. Thank you for all answers! ;)
Best Regards,
Eduardo
I am working on a website and I want the navigation (only home the homepage) to be transparent and the image to cover the full screen. This is what I have so far:
The nav-bar is styled in this way because that's how it is on the other pages.
This is my HTML:
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">
Bunk.
</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">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
<li class="nav-iten">
<button class="btn signup"> SIGN UP</button>
</li>
</ul>
</div>
</nav>
</div>
and my css:
#mainNav {
background-image: linear-gradient(90deg, #439EE0 0%, #26ADE6 100%);
/*margin-top: -0.5%;*/
padding-top: 1rem;
padding-bottom: 3rem;
margin-bottom: 0;
}
.navbar-toggler.navbar-toggler-right {
color:white;
border: 1px solid white;
font-size: 1.2rem;
padding: 1rem;
}
.navbar-light .navbar-nav .nav-link {
font-size: 1.2rem;
color: #ffffff;
letter-spacing: 0.8px;
text-align: center;
padding-right: 5rem;
}
.navbar-brand.js-scroll-trigger {
color: #ffffff;
font-size: 2rem;
}
Any suggestions?
There's no need for any custom css hacks here.
To make your Bootstrap navbar transparent, all you need is to remove the class bg-light.
That's it!
The bg in bg-light stands for "background". So, if you leave out the class for background color, you automatically have a transparent navbar.
Ok, first of all you need to separate the home page from the other pages. To do this just insert an ID on your body section like #home.
So, in this scenario you will add the following:
body#home #mainNav {
background:transparent;
background-image:none;
position:absolute;
width:100%;
left:0px;
right:0px;
top:0px;
}
Don't forget that your Slider (or w/e you have after #mainNav), maybe will need some padding-top equals to the #mainNav height, for example (in case that your #mainNav height is 50px):
.slider {
padding-top:50px;
}
You can give an extra class to your navbar on your index.html only. (or your homepage html file name.)
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans navbar--home" id="mainNav">
Then you can select this class like :
#mainNav.navbar--home{
background:transparent;
}
Use home page body class, for ex.: ".home / .home-index / .index-page" as a parent of ".nav.fixed-top" container.
CSS::
.home .nav.fixed-top{
background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
}