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
Related
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?
I think it's a silly question but I'm struggling to adjust the header. Whenever I use the position as fixed or sticky, the margin doesn't work properly.
I want the same margin as the body section. But it's not working properly.
The current situation:
What I'm looking for:
codes I have used:
CSS:
.hh{
background-color:#BADA55;
height:150px;
border-radius:0px 0px 5px 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.16),
0 8px 8px rgba(0,0,0,0.20);
z-index:999;
position: sticky;
/*margin-right: 250px;*/
/*margin-left: 250px;*/
/*margin: 0 auto; */
width: auto;
top: 0;
overflow-x:hidden;
}
.logo{
width:58px;
height:58px;
}
.logoh{
font-size:32px;
float:right;
margin-left:12px; margin-top:3px;
font-family: Arial, Helvetica, sans-serif;
}
.bd{
border-top:3px solid #5D6E1D;
border-bottom:3px solid #5D6E1D;
line-height:0px;
}
HTML:
<div class="hh" >
<div style="width:100%">
<div class="container ">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 col-sm-12" style="text-align:center; padding:10px">
<div style="display:inline-block">
<div class="navbar-brand">
<img class="logo" src="images/logo.png" style="float:left">
<p class="logoh" style="font-weight:500"> Linda Hammond Research</p>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div style="margin-left:15px; margin-right:15px">
<nav class="navbar navbar-expand-lg navbar-light bd ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="float:right">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about-me.php">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="research.php">Research </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="reports.php">Reports </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="professional-services.php">Professional Services </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="speaker.php">Speaker </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="prices.php">Prices </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="testimonials.php">Testimonials </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="terms-conditions.php">T&C </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.php">Contact </a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
A solution could be to create a new class that you will add to your header and content like so:
.bodyWidth {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Add max-with:{{size second box}} to hh class
or
put both box into a container class.
<div class="container">
//first box
//second box
</div>
So I am new to bootstrap 4 and sass and i want to do a project with both of them for the first time. The problem comes when I am trying to construct a div that is 900px in height but somehow, for some reason, it does not show up. It only shows up when I actually put things in it. What am I doing wrong here?
Could it be a problem because i am using sass? Or is it something completely else?
Code:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.I {
width: 100%;
height: 2000px;
}
.II {
height: auto;
width: 100%;
background-image: url(https://66.media.tumblr.com/94fb0667afbd3be221b09eb507991a22/tumblr_pwp1fg971T1qjb5z3o2_1280.png);
background-size: cover;
color: white;
}
.II .nav-link {
color: white;
}
.II a {
text-decoration: none;
color: white;
font-weight: bold;
}
.II a:hover {
color: #cacaca;
}
.IV {
background-color: #6362a7;
width: 100%;
height: 900px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 50px;
}
.fa-suitcase {
color: #f5b944;
}
.col-md-2 {
margin-right: 0px;
width: 15%;
}
/*# sourceMappingURL=webwavers.css.map */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body>
<div class="I container-fluid">
<div class="row">
<div class="II container-fluid">
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="#">COSMOS</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 offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<!-- <div class="III container"> -->
</div>
<div class="row">
<div class="IV container-fluid">
<!--im small and i should be 900 px in height-->
</div>
</div>
</div>
A simple .container-fluid > .row > .col-12 will do. Giving .col-12 (or any of its children) a height of 900px will make it apply. Working example:
.min-900 {
border: 3px solid red;
height: 900px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">COSMOS</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 offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="row">
<div class="col-12 min-900"></div>
</div>
</main>
If you want to use min-height instead of height, your selector has to have a specificity of more than 1 class, because .col-* classes have a min-height of 1px, which you need to override. Example:
div.min-900 {
border: 3px solid red;
min-height: 900px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">COSMOS</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 offset-1">
<li class="nav-item offset-2">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item offset-2">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid">
<div class="row">
<div class="col-12 min-900"></div>
</div>
</main>
As said in the comments, do not put content directly into row. You actually need to put it into col-*-* so what you need is to change that to .row > col-*-* > (content). What I am using is simple notation. <div class="warning><p class="bold">content</p></p> corresponds to warning > bold > (content). I think you'll understand what I am telling you by now.
Hope this helps!
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>
I have a navbar, and it works fine when there are only single-line items:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
</div>
</a>
</li>
</ul>
</div>
But when item is multiline, the other items lose center vertical alignment and align top instead:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</div>
</a>
</li>
</ul>
</div>
My SASS code:
#site-header {
background: #2d3840;
border-bottom: solid 1px #20272d;
height: 83px;
.navbar-brand {
color: white;
}
.nav-item {
&:not(:first-child) {
margin-left: 25px;
}
&:not(:last-child) {
margin-right: 25px;
}
// General link
a.nav-link {
color: white;
font-size: 16px;
text-align: center;
#include transition(0.5s);
&:hover {
#include transition(0.3s);
color: $color-accent;
}
&.active {
padding: 6px 21px 6px 21px;
background: $color-accent;
border-radius: 17.5px;
box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6);
&:hover {
color: white;
box-shadow: none;
}
}
// Profile
&.profile {
.profile-info {
display: inline-block;
.name {
display: block;
font-weight: bold;
}
.balance {
display: block;
font-size: 16px;
font-weight: bold;
color: $color-accent;
}
}
}
}
}
}
Desired:
So, how to center items when there are multi-line items?
Remove the profile-info and use these classes for the a tag.
d-flex - to make it flex
flex-column - to change its flex-direction property to column
text-right - to align its inline children on the right side of it
<li class="nav-item">
<a class="nav-link d-flex flex-column text-right" href="#">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</a>
</li>
To align the other items vertically in the center of the list, use align-self-center for each one of the li elements.
<li class="nav-item align-self-center">
<a class="nav-link" href="#">FAQ</a>
</li>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.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 ml-auto">
<li class="nav-item active align-self-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item ">
<a class="nav-link d-flex flex-column text-right" href="#">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</a>
</li>
</ul>
</div>
</nav>