Sticky navbar won't show up properly-Twitter bootstrap

PapT
June 15, 2020
102 views
0 votes
2 Answers

I’m building a navigation bar, but I’m having trouble displaying the sticky part properly.

As you can see, it shows up, but the menu items are moved to the left, and the background isn’t full-width. Basically what I’d like to do is when I scroll, the full navigation part of the header Where the menu items are) should appear.

https://codepen.io/dtommy79/pen/yLeayMW

$(document).ready(function() {
  
  $(window).scroll(function () { 
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 180) {
      $('.menu-container').addClass('sticky-header');
    }
    if ($(window).scrollTop() < 181) {
      $('.menu-container').removeClass('sticky-header');
    }
  });
});

body { background-color: #ccc; }
/* Navigation */
#style-2-top-bar {
	background-color: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding-top: 18px;
}

#logo a img {
	padding-bottom: 10px;
}

/* header details */
.details-block .block .media i {
	background-color: #0087be;
	color: #fff;
    padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 13px;
    font-size: 18px;
    height: 40px;
    line-height: 20px;
    width: 40px;
	border-radius: 10%;
}

.details-block .block .media .media-body h5 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 0;
}

.details-block .block .media .media-body p {
	font-size: 13px;
}

.details-block .block:not(:last-child) {
	margin-right: 20px;
}

/* Main navigation */
#main-nav-wrapper {
	height: 50px;
  background-color: #fff;
}

#main-nav-wrapper .header-main-section {
	position: relative;
}

.sticky-header {
	position: fixed;
	top: 0;
	z-index: 10000;
	background-color: #ffffff;
}

#main-nav-wrapper .header-main-section .menu {
	float: left;
	margin-top: 10px;
	margin-left: -50px;
}

.menu li {
  list-style: none;
  display: inline-block;
}

.menu li a {
  color: #2b2b2b;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: .4s;
  font-size: 14px;
  font-weight: 600;
}

.show-menu-btn, .hide-menu-btn {
  transition: .4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}

.show-menu-btn {
  float: right;
}

.show-menu-btn i {
  line-height: 80px;
}

.menu a:hover, .show-menu-btn:hover, .hide-menu-btn:hover {
  color: #3498db;
}

#chk {
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

/* Drop down menu style */
#main-nav-wrapper .header-main-section ul ul {
	position: absolute;
	top: 50px;
	background: #ffffff;
	border-top-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-style: solid;
	border-color: #0087be;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	opacity: 0;
	visibility: hidden;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform-origin: center top 0;
	-webkit-transform-origin: center top 0;
	-moz-transform-origin: center top 0;
	-ms-transform-origin: center top 0;
	-o-transform-origin: center top 0;
	transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	padding: 0;
	z-index: 1000;
}

#main-nav-wrapper .header-main-section ul li:hover > ul {

  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  -moz-transform-origin: center top 0;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
}

#main-nav-wrapper .header-main-section ul ul li {
  position: relative;
  margin: 0px;
  width: 180px;
  float: none;
  display: block;
  line-height: 50px;
}

#main-nav-wrapper .header-main-section ul ul li:not(:last-child) {
	border-bottom: 1px solid rgba(57,81,104, .2);
}

#main-nav-wrapper .header-main-section ul ul li a {
	display: block;
	font-size: 12px;
}

/* Content */

#hero {
	background: url('../images/medicalbg-2.jpg') rgba(0,0,0, .8);
	padding-top: 50px;
	padding-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<header id="style-2-header">

	<div id="style-2-top-bar">

		<div class="container">

			<div class="row">

				<div class="col-lg-3">

					<div id="logo">
						<a href="">
							<img class="img-fluid" src="https://dailyenglishtests.com/logo-dark.png" width="227" height="50">
						</a>
					</div>

				</div>

				<div class="col-lg-9">

					<div class="details-block d-flex justify-content-end">
						
						<div class="block">
							<div class="media">
								<i class="fas fa-map-marker-alt mr-2"></i>
								<div class="media-body">
									<h5>One Canada Square,</h5>
									<p>Canary Wharf, United Kingdom.</p>
								</div>
							</div>
						</div>

						<div class="block">
							<div class="media">
								<i class="far fa-clock mr-2"></i>
								<div class="media-body">
									<h5>Mon-Fri: 9am to 5pm</h5>
									<p>Saturday/Sunday: Closed</p>
								</div>
							</div>
						</div>

						<div class="block">
							<div class="media">
								<i class="fas fa-headset mr-2"></i>
								<div class="media-body">
									<h5>+12 123 456 789</h5>
									<p><a href="mailto:[email protected]">[email protected]</a></p>
								</div>
							</div>
						</div>

					</div>

				</div>

			</div>

		</div> <!-- End .container -->

	</div> <!-- End #header-logo-bar -->

	<div id="main-nav-wrapper">
	
		<div class="header-main-section">

			<div class="menu-container">
				<div class="container">
					<input type="checkbox" id="chk">
					<label for="chk" class="show-menu-btn">
						<i class="fas fa-ellipsis-h"></i>
					</label>

					<ul class="menu">
						<li><a href="#">Home</a></li>
						<li><a href="#">Blog</a></li>
						<li>
							<a href="#" aria-haspopup="true"><i class="fas fa-chevron-down"></i> My Account</a>
							<ul>
								<li><a href="#"><i class="fas fa-user-cog"></i> Dashboard</a></li>
								<li><a href="#"><i class="fas fa-user-md"></i> Profile</a></li>
								<li><a href="#"><i class="fas fa-sign-out-alt"></i> Sections</a></li>
								<li><a href="#"><i class="fas fa-sign-out-alt"></i> Change Email</a></li>
							</ul>
						</li>

						<label for="chk" class="hide-menu-btn">
							<i class="fas fa-times"></i>
						</label>
					</ul>
				</div>
			</div>

		</div>
	
	</div> <!-- End #header-main-sticky-wrapper -->


</header>




 <section id="hero">

	<div class="container">

		<div class="row">
			<div class="col-md-12">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>

	</div>

 </section>
  
<section>
	<div class="container">

		<div class="row">
			<div class="col-md-12">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



			</div>
		</div>

	</div>
</section>

Answers

Add left: 0; and right: 0; to .sticky-header will solve your problem? I hope I understand your problem.

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;  /* Add this line */
  right: 0;  /* Add this line */
  z-index: 10000;
  background-color: #ffffff;
}

$(document).ready(function() {

  $(window).scroll(function() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > 180) {
      $('.menu-container').addClass('sticky-header');
    }
    if ($(window).scrollTop() < 181) {
      $('.menu-container').removeClass('sticky-header');
    }
  });
});

body {
  background-color: #ccc;
}


/* Navigation */

#style-2-top-bar {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 18px;
}

#logo a img {
  padding-bottom: 10px;
}


/* header details */

.details-block .block .media i {
  background-color: #0087be;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 13px;
  font-size: 18px;
  height: 40px;
  line-height: 20px;
  width: 40px;
  border-radius: 10%;
}

.details-block .block .media .media-body h5 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0;
}

.details-block .block .media .media-body p {
  font-size: 13px;
}

.details-block .block:not(:last-child) {
  margin-right: 20px;
}


/* Main navigation */

#main-nav-wrapper {
  height: 50px;
  background-color: #fff;
}

#main-nav-wrapper .header-main-section {
  position: relative;
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;  /* Add this line */
  right: 0;  /* Add this line */
  z-index: 10000;
  background-color: #ffffff;
}

#main-nav-wrapper .header-main-section .menu {
  float: left;
  margin-top: 10px;
  margin-left: -50px;
}

.menu li {
  list-style: none;
  display: inline-block;
}

.menu li a {
  color: #2b2b2b;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: .4s;
  font-size: 14px;
  font-weight: 600;
}

.show-menu-btn,
.hide-menu-btn {
  transition: .4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}

.show-menu-btn {
  float: right;
}

.show-menu-btn i {
  line-height: 80px;
}

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #3498db;
}

#chk {
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}


/* Drop down menu style */

#main-nav-wrapper .header-main-section ul ul {
  position: absolute;
  top: 50px;
  background: #ffffff;
  border-top-width: 3px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-style: solid;
  border-color: #0087be;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform-origin: center top 0;
  -webkit-transform-origin: center top 0;
  -moz-transform-origin: center top 0;
  -ms-transform-origin: center top 0;
  -o-transform-origin: center top 0;
  transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  padding: 0;
  z-index: 1000;
}

#main-nav-wrapper .header-main-section ul li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  -moz-transform-origin: center top 0;
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
}

#main-nav-wrapper .header-main-section ul ul li {
  position: relative;
  margin: 0px;
  width: 180px;
  float: none;
  display: block;
  line-height: 50px;
}

#main-nav-wrapper .header-main-section ul ul li:not(:last-child) {
  border-bottom: 1px solid rgba(57, 81, 104, .2);
}

#main-nav-wrapper .header-main-section ul ul li a {
  display: block;
  font-size: 12px;
}


/* Content */

#hero {
  background: url('../images/medicalbg-2.jpg') rgba(0, 0, 0, .8);
  padding-top: 50px;
  padding-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<header id="style-2-header">

  <div id="style-2-top-bar">

    <div class="container">

      <div class="row">

        <div class="col-lg-3">

          <div id="logo">
            <a href="">
              <img class="img-fluid" src="https://dailyenglishtests.com/logo-dark.png" width="227" height="50">
            </a>
          </div>

        </div>

        <div class="col-lg-9">

          <div class="details-block d-flex justify-content-end">

            <div class="block">
              <div class="media">
                <i class="fas fa-map-marker-alt mr-2"></i>
                <div class="media-body">
                  <h5>One Canada Square,</h5>
                  <p>Canary Wharf, United Kingdom.</p>
                </div>
              </div>
            </div>

            <div class="block">
              <div class="media">
                <i class="far fa-clock mr-2"></i>
                <div class="media-body">
                  <h5>Mon-Fri: 9am to 5pm</h5>
                  <p>Saturday/Sunday: Closed</p>
                </div>
              </div>
            </div>

            <div class="block">
              <div class="media">
                <i class="fas fa-headset mr-2"></i>
                <div class="media-body">
                  <h5>+12 123 456 789</h5>
                  <p><a href="mailto:[email protected]">[email protected]</a></p>
                </div>
              </div>
            </div>

          </div>

        </div>

      </div>

    </div>
    <!-- End .container -->

  </div>
  <!-- End #header-logo-bar -->

  <div id="main-nav-wrapper">

    <div class="header-main-section">

      <div class="menu-container">
        <div class="container">
          <input type="checkbox" id="chk">
          <label for="chk" class="show-menu-btn">
						<i class="fas fa-ellipsis-h"></i>
					</label>

          <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li>
              <a href="#" aria-haspopup="true"><i class="fas fa-chevron-down"></i> My Account</a>
              <ul>
                <li><a href="#"><i class="fas fa-user-cog"></i> Dashboard</a></li>
                <li><a href="#"><i class="fas fa-user-md"></i> Profile</a></li>
                <li><a href="#"><i class="fas fa-sign-out-alt"></i> Sections</a></li>
                <li><a href="#"><i class="fas fa-sign-out-alt"></i> Change Email</a></li>
              </ul>
            </li>

            <label for="chk" class="hide-menu-btn">
							<i class="fas fa-times"></i>
						</label>
          </ul>
        </div>
      </div>

    </div>

  </div>
  <!-- End #header-main-sticky-wrapper -->


</header>




<section id="hero">

  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>

</section>

<section>
  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



      </div>
    </div>

  </div>
</section>

- John
- June 15, 2020 at 2:26 pm
- 0 votes
0
Simply add width: 100%; to your .sticky-header class in CSS.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.