Dynamically pushing pages content underneath sticky header and nav

user_7954280 0
Viewed 27

I have a bit of an odd situation. I'm currently using a 2 piece sticky header. One part is a header that will have logos and socials and the other is a separate piece as a navbar. I've gotten it so that both pieces act as a solid piece and they are sticky but my problem now is the content of the page not sitting underneath.

I'm trying to make this a global fix so that no matter what page it is or what the content (not to mention responsiveness for different laptops and monitors)the content will always sit a bit underneath the sticky header(s)

I know i can put a top rule on the content but I'll need to do that on each page and make several specific rules.

Is there a way to tackle this on the header itself so that it will effectively 'push' the content below it no matter what?

.mainHeader {
  background-color: white;
  z-index: 25;
  position: fixed !important;
  height:82px;
}

#navbar{
  position: fixed !important;
  top: 82px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">

    <div class="row">
        <!-- ============================================== -->
        <div class="col-sm-12 mainHeader d-none d-md-block mb-2">
            <div class="row m-auto">
                <div class="col-sm-3 align-self-center">
                    Col 1
                </div>
                <div class="col-sm-3 align-self-center">
                   Logo here
                </div>
                <div class="col-sm-3 align-self-center">
                   Socials
                </div>
            </div>
        </div>
        <!-- *************** Navbar **************** -->
            <div id="navbar" class="col-sm-12 p-0" style="background-color: #01j47d !important;">
                <nav id="navbarSticky" class="navbar navbar-expand-md navbar-dark bg-dark" style="background-color: #01j47d !important;">

                    <div class="collapse navbar-collapse">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="/"><span id="homeSpan">Home</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/about"><span id="homeSpan">About</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/Contact"><span id="homeSpan">Contact</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/FAQ"><span id="homeSpan">FAQ</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

<div class="row">
 <div class="col-lg-6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem id justo malesuada varius. Phasellus id fringilla lacus, vel sagittis est. Sed iaculis sit amet ipsum in lobortis. Maecenas vitae scelerisque turpis. Quisque congue augue non enim venenatis, ac malesuada ante faucibus. Phasellus ut aliquam eros. Ut a augue ac enim faucibus aliquet. Vestibulum porttitor arcu sapien, vitae viverra ex bibendum in. Donec a venenatis sem. Sed tempor blandit felis, ac efficitur lectus. Mauris non molestie nulla. Nunc sed odio a ligula efficitur dapibus vitae ac dolor. Nam porttitor libero nisi, eu pharetra magna condimentum in. Aliquam lacinia nec arcu et iaculis.
<br>
In facilisis aliquet ante, nec consequat neque. Morbi eu nulla vel dui viverra mattis at et mauris. Proin semper, ante ac pharetra laoreet, justo orci elementum libero, non gravida mauris justo ut justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur arcu eros, mollis et tortor vitae, dictum molestie felis. Integer consectetur blandit sapien, eget euismod nulla varius vel. Suspendisse a cursus neque, non posuere sapien. Nulla placerat molestie feugiat. Nunc purus diam, varius quis tellus vel, pulvinar euismod quam.
<br>
Proin ut efficitur leo, sit amet eleifend libero. Nam rutrum odio a ultrices viverra. Nulla quam mauris, suscipit id dolor nec, dignissim posuere sapien. Suspendisse tincidunt purus non ante dictum, vel finibus libero congue. Nunc eros turpis, ultrices id ultrices ac, consectetur nec sem. Donec metus metus, cursus in eros in, convallis vestibulum lorem. Sed hendrerit iaculis ligula, quis pretium tortor consectetur eget. Aliquam erat volutpat. Donec volutpat viverra est vel finibus. Phasellus quis fringilla lacus. Praesent interdum pellentesque dui quis rutrum. Morbi ornare elit urna, sed tincidunt orci posuere at.
 </div>
 <div class="col-lg-6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem id justo malesuada varius. Phasellus id fringilla lacus, vel sagittis est. Sed iaculis sit amet ipsum in lobortis. Maecenas vitae scelerisque turpis. Quisque congue augue non enim venenatis, ac malesuada ante faucibus. Phasellus ut aliquam eros. Ut a augue ac enim faucibus aliquet. Vestibulum porttitor arcu sapien, vitae viverra ex bibendum in. Donec a venenatis sem. Sed tempor blandit felis, ac efficitur lectus. Mauris non molestie nulla. Nunc sed odio a ligula efficitur dapibus vitae ac dolor. Nam porttitor libero nisi, eu pharetra magna condimentum in. Aliquam lacinia nec arcu et iaculis.
<br>
In facilisis aliquet ante, nec consequat neque. Morbi eu nulla vel dui viverra mattis at et mauris. Proin semper, ante ac pharetra laoreet, justo orci elementum libero, non gravida mauris justo ut justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur arcu eros, mollis et tortor vitae, dictum molestie felis. Integer consectetur blandit sapien, eget euismod nulla varius vel. Suspendisse a cursus neque, non posuere sapien. Nulla placerat molestie feugiat. Nunc purus diam, varius quis tellus vel, pulvinar euismod quam.
<br>
Proin ut efficitur leo, sit amet eleifend libero. Nam rutrum odio a ultrices viverra. Nulla quam mauris, suscipit id dolor nec, dignissim posuere sapien. Suspendisse tincidunt purus non ante dictum, vel finibus libero congue. Nunc eros turpis, ultrices id ultrices ac, consectetur nec sem. Donec metus metus, cursus in eros in, convallis vestibulum lorem. Sed hendrerit iaculis ligula, quis pretium tortor consectetur eget. Aliquam erat volutpat. Donec volutpat viverra est vel finibus. Phasellus quis fringilla lacus. Praesent interdum pellentesque dui quis rutrum. Morbi ornare elit urna, sed tincidunt orci posuere at.
 </div>
<div>
    </div>

css html
1 Answers

I removed a lot of duplicate id="" since that is invalid markup. I removed all the CSS and added a sticky-top class and changed some markup to header and main simply for clarity of what is what.

Key here is the containers contain rows and the rows stack. A row can ALSO be a container which can have stacked rows.

Not sure how your navabar was supposed to work but I made it appear always just to illustrate here that it is (in my case) a block/row in the header container. and as a new row in the header container (which I gave a bg-success just to illustrate what was what.

/*
.mainHeader {
  background-color: white;
  z-index: 25;
  position: fixed !important;
  height: 82px;
}

#navbar {
  position: fixed !important;
  top: 82px !important;
}
*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <header class="row sticky-top bg-success">
    <div class="row col-12">
      <div class="col-sm-12 bg-white pb-3">
        <div class="row m-auto">
          <div class="col-sm-3 align-self-center">
            Col 1
          </div>
          <div class="col-sm-3 align-self-center">
            Logo here
          </div>
          <div class="col-sm-3 align-self-center">
            Socials
          </div>
        </div>
      </div>
    </div>
    <div class="row col-12">
      <div id="navbar" class="col-sm-12 p-0">
        <nav id="navbarSticky" class="navbar navbar-expand navbar-dark bg-dark">
          <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="/"><span >Home</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/about"><span >About</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/Contact"><span >Contact</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/FAQ"><span >FAQ</span></a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </header>
  <main class="container-fluid row mt-2">
    <div class="row">
      <div class="col-lg-6">xxxx I am top Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem id justo malesuada varius. Phasellus id fringilla lacus, vel sagittis est. Sed iaculis sit amet ipsum in lobortis. Maecenas vitae scelerisque turpis. Quisque congue
        augue non enim venenatis, ac malesuada ante faucibus. Phasellus ut aliquam eros. Ut a augue ac enim faucibus aliquet. Vestibulum porttitor arcu sapien, vitae viverra ex bibendum in. Donec a venenatis sem. Sed tempor blandit felis, ac efficitur
        lectus. Mauris non molestie nulla. Nunc sed odio a ligula efficitur dapibus vitae ac dolor. Nam porttitor libero nisi, eu pharetra magna condimentum in. Aliquam lacinia nec arcu et iaculis.
        <br> In facilisis aliquet ante, nec consequat neque. Morbi eu nulla vel dui viverra mattis at et mauris. Proin semper, ante ac pharetra laoreet, justo orci elementum libero, non gravida mauris justo ut justo. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia curae; Curabitur arcu eros, mollis et tortor vitae, dictum molestie felis. Integer consectetur blandit sapien, eget euismod nulla varius vel. Suspendisse a cursus neque, non posuere sapien. Nulla placerat
        molestie feugiat. Nunc purus diam, varius quis tellus vel, pulvinar euismod quam.
        <br> Proin ut efficitur leo, sit amet eleifend libero. Nam rutrum odio a ultrices viverra. Nulla quam mauris, suscipit id dolor nec, dignissim posuere sapien. Suspendisse tincidunt purus non ante dictum, vel finibus libero congue. Nunc eros turpis,
        ultrices id ultrices ac, consectetur nec sem. Donec metus metus, cursus in eros in, convallis vestibulum lorem. Sed hendrerit iaculis ligula, quis pretium tortor consectetur eget. Aliquam erat volutpat. Donec volutpat viverra est vel finibus.
        Phasellus quis fringilla lacus. Praesent interdum pellentesque dui quis rutrum. Morbi ornare elit urna, sed tincidunt orci posuere at.
      </div>
      <div class="col-lg-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem id justo malesuada varius. Phasellus id fringilla lacus, vel sagittis est. Sed iaculis sit amet ipsum in lobortis. Maecenas vitae scelerisque turpis. Quisque congue augue non enim venenatis,
        ac malesuada ante faucibus. Phasellus ut aliquam eros. Ut a augue ac enim faucibus aliquet. Vestibulum porttitor arcu sapien, vitae viverra ex bibendum in. Donec a venenatis sem. Sed tempor blandit felis, ac efficitur lectus. Mauris non molestie
        nulla. Nunc sed odio a ligula efficitur dapibus vitae ac dolor. Nam porttitor libero nisi, eu pharetra magna condimentum in. Aliquam lacinia nec arcu et iaculis.
        <br> In facilisis aliquet ante, nec consequat neque. Morbi eu nulla vel dui viverra mattis at et mauris. Proin semper, ante ac pharetra laoreet, justo orci elementum libero, non gravida mauris justo ut justo. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia curae; Curabitur arcu eros, mollis et tortor vitae, dictum molestie felis. Integer consectetur blandit sapien, eget euismod nulla varius vel. Suspendisse a cursus neque, non posuere sapien. Nulla placerat
        molestie feugiat. Nunc purus diam, varius quis tellus vel, pulvinar euismod quam.
        <br> Proin ut efficitur leo, sit amet eleifend libero. Nam rutrum odio a ultrices viverra. Nulla quam mauris, suscipit id dolor nec, dignissim posuere sapien. Suspendisse tincidunt purus non ante dictum, vel finibus libero congue. Nunc eros turpis,
        ultrices id ultrices ac, consectetur nec sem. Donec metus metus, cursus in eros in, convallis vestibulum lorem. Sed hendrerit iaculis ligula, quis pretium tortor consectetur eget. Aliquam erat volutpat. Donec volutpat viverra est vel finibus.
        Phasellus quis fringilla lacus. Praesent interdum pellentesque dui quis rutrum. Morbi ornare elit urna, sed tincidunt orci posuere at.
      </div>
    </div>
  </main>
</div>

user_1259810
Related