Just as the title says, I am getting horizontal scroll bar on Safari and Chrome with the header width being 100%. What is causing this?! Here is my code:
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
document.getElementById("navbar").classList.add('fixed-navbar');
} else if (document.body.scrollTop < 10 && document.documentElement.scrollTop < 10) {
document.getElementById("navbar").classList.remove('fixed-navbar');
}
}html {
font-size: 87.5%;
}
body {
font-size: 1em;
line-height: 1.85em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
color: #666666;
font-weight: 400;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
color: #666666;
}
header {
position: absolute !important;
width: 100%;
transition: all .5s; /*??*/
padding: 0 !important;
margin: 0 !important;
}
.top-bar {
color: #fff;
border-bottom: 1px solid rgba(144, 144, 144, 0.25);
}
.navbar {
position: absolute !important;
width: 100%;
transition: all .5s;
}
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
}
.top-bar a,
.nav-item a {
text-decoration: none;
outline: none;
color: #ffffff;
opacity: 1;
font-weight: 600;
font-size: .85em;
}
.top-bar a:hover,
.nav-item a:hover {
opacity: 0.5;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
.fixed-navbar {
background: white;
top: 0;
position: fixed !important;
animation-name: fixedAnim;
animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
/*-1px 6px 13px 0px rgba(0, 0, 0, 0.44);*/
}
.fixed-navbar a {
color: #000;
}
.navbar.fixed-navbar .navbar-collapse {
/*transition-delay: 1s;*/
background: #fff !important;
}
.navbar.fixed-navbar .navbar-toggler span {
background: #000 !important;
}
.navbar.fixed-navbar .logo-dark {
display: inline-block !important;
}
.navbar.fixed-navbar .logo-default {
display: none !important;
}
@keyframes fixedAnim {
from {
top: -50px;
}
to {
top: 0;
}
}
/* Define the shape and color of the hamburger lines */
.navbar-toggler span {
display: block;
background-color: #4f4f4f;
height: 3px;
width: 25px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
left: 0;
opacity: 1;
transition: all 0.35s ease-out;
transform-origin: center left;
}
/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
margin-top: 0.3em;
}
/**
* Animate collapse into X.
*/
/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
transform: translate(15%, 33%) rotate(-45deg);
}
/**
* Animate collapse open into hamburger menu
*/
/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
transform: translate(0%, 0%) rotate(0deg);
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
transform: translate(0%, 0%) rotate(0deg);
}
.navbar .navbar-toggler span {
background: white;
}
.hero {
width: 100%;
height: 90vh;
background: url('https://www.fillmurray.com/1024/768');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous"></script>
<header>
<div class="top-bar">
<div class="row">
<div class="col-md-6 my-1">
<ul class="list-inline mb-0 ml-lg-5 ml-md-4 ml-3">
<li class="list-inline-item"><a href="#"><i class="fa fa-phone"></i> phone here</a></li>
<li class="list-inline-item ml-2"><a href="#"><a href="#"><i class="fa fa-envelope"></i> email goes here</a></li>
</ul>
</div>
<div class="col-md-6 d-none d-md-block my-1">
<ul class="list-inline float-right mb-0 mr-lg-5 mr-md-4">
<li class="list-inline-item"><a href="#">Client Login <i class="fa fa-sign-in-alt"></i></a></li>
</ul>
</div>
</div>
</div>
<nav id="navbar" class="navbar navbar-expand-sm">
<a class="navbar-brand ml-lg-5 ml-md-4 ml-1" href="#">
<img src="http://via.placeholder.com/32x55" alt="" width="32" height="55" class="d-inline-block align-top logo-default ml-lg-4 ml-md-4 ml-0" id="navlogo">
<img src="http://via.placeholder.com/32x55" alt="" width="32" height="55" class="d-none align-top logo-dark ml-lg-4 ml-md-4 ml-0" id="navlogo">
</a>
<button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span> </span>
<span> </span>
<span> </span>
</button>
<div class="navbar-collapse collapse text-right" id="navbarsExample04">
<ul class="navbar-nav ml-auto mr-3 text-uppercase">
<li class="nav-item active">
<a class="nav-link" href="#">one</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">two</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">three</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">four</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">five</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<section class="hero">
<div class="container-fluid">
</div>
</section>
<div class="background-white">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p><p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
</div>
</main>Why do the horizontal scroll bars appear for header width being set to 100?
I need to add more text and I have a follow up question that has been giving me errors:
When you scroll down the transition is messed up by
.navbar.fixed-navbar .navbar-collapse {
background: #fff !important;
}
if I add transition-delay: 1s; it fixes the transition but gives a 1s delay when the button is pushed on mobile. What is the cleanest and most elegant way to fix this?
It appears your row in top-bar has a margin on it. Add m-0 to remove it. I don't know why that is though.