Dynamically pushing pages content underneath sticky header and nav-CodePudding

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 >

    <div >
        <!-- ============================================== -->
        <div >
            <div >
                <div >
                    Col 1
                </div>
                <div >
                   Logo here
                </div>
                <div >
                   Socials
                </div>
            </div>
        </div>
        <!-- *************** Navbar **************** -->
            <div id="navbar"  style="background-color: #01j47d !important;">
                <nav id="navbarSticky"  style="background-color: #01j47d !important;">

                    <div >
                        <ul >
                            <li >
                                <a  href="/"><span id="homeSpan">Home</span>
                                </a>
                            </li>
                            <li >
                                <a  href="/about"><span id="homeSpan">About</span>
                                </a>
                            </li>
                            <li >
                                <a  href="/Contact"><span id="homeSpan">Contact</span>
                                </a>
                            </li>
                            <li >
                                <a  href="/FAQ"><span id="homeSpan">FAQ</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>

<div >
 <div >
    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 >
    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>

CodePudding user response：

If I understand correctly, the content seems to be starting at the top of the body rather than being pushed down by your navigation bars. What if you wrapped your navigation bars in a <div> and assign a sticky-top class to it since you're using bootstrap. Like so (Disclaimer: The second block shows up fine when editing the snippet, not sure it won't show when adding to the post, or see in full-screen mode):

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <div >
        <div >
          Col 1
        </div>
        <div >
          Logo here
        </div>
        <div >
          Socials
        </div>
      </div>
    </div>
  </div>
  <div id="navbar" >
    <nav id="navbarSticky" >
      <div >
        <ul >
          <li >
            <a  href="/"><span id="homeSpan">Home</span>
                            </a>
          </li>
          <li >
            <a  href="/about"><span id="homeSpan">About</span>
                            </a>
          </li>
          <li >
            <a  href="/Contact"><span id="homeSpan">Contact</span>
                            </a>
          </li>
          <li >
            <a  href="/FAQ"><span id="homeSpan">FAQ</span>
                            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<!-- Content goes here -->
<div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ipsum dolorem neque, nostrum commodi blanditiis tempore eum laboriosam facilis, tenetur nam earum. Esse expedita a perferendis? Consectetur autem neque natus nulla cupiditate qui laudantium
    nemo ea, cum quas eveniet molestiae, aut, fugit earum soluta assumenda corrupti consequatur saepe labore modi officia aspernatur. Ducimus est dignissimos ut voluptatem nesciunt nam sunt cum fugit magnam quae, sed odio aliquam delectus voluptatum laudantium
    exercitationem. Dolores ipsum neque ea, autem natus explicabo amet aliquam harum hic blanditiis repellendus dicta dolorem doloribus modi fugiat quaerat sint repudiandae recusandae aut adipisci. Aliquam at repellendus illo nam.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ipsum dolorem neque, nostrum commodi blanditiis tempore eum laboriosam facilis, tenetur nam earum. Esse expedita a perferendis? Consectetur autem neque natus nulla cupiditate qui laudantium
    nemo ea, cum quas eveniet molestiae, aut, fugit earum soluta assumenda corrupti consequatur saepe labore modi officia aspernatur. Ducimus est dignissimos ut voluptatem nesciunt nam sunt cum fugit magnam quae, sed odio aliquam delectus voluptatum laudantium
    exercitationem. Dolores ipsum neque ea, autem natus explicabo amet aliquam harum hic blanditiis repellendus dicta dolorem doloribus modi fugiat quaerat sint repudiandae recusandae aut adipisci. Aliquam at repellendus illo nam.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ipsum dolorem neque, nostrum commodi blanditiis tempore eum laboriosam facilis, tenetur nam earum. Esse expedita a perferendis? Consectetur autem neque natus nulla cupiditate qui laudantium
    nemo ea, cum quas eveniet molestiae, aut, fugit earum soluta assumenda corrupti consequatur saepe labore modi officia aspernatur. Ducimus est dignissimos ut voluptatem nesciunt nam sunt cum fugit magnam quae, sed odio aliquam delectus voluptatum laudantium
    exercitationem. Dolores ipsum neque ea, autem natus explicabo amet aliquam harum hic blanditiis repellendus dicta dolorem doloribus modi fugiat quaerat sint repudiandae recusandae aut adipisci. Aliquam at repellendus illo nam.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ipsum dolorem neque, nostrum commodi blanditiis tempore eum laboriosam facilis, tenetur nam earum. Esse expedita a perferendis? Consectetur autem neque natus nulla cupiditate qui laudantium
    nemo ea, cum quas eveniet molestiae, aut, fugit earum soluta assumenda corrupti consequatur saepe labore modi officia aspernatur. Ducimus est dignissimos ut voluptatem nesciunt nam sunt cum fugit magnam quae, sed odio aliquam delectus voluptatum laudantium
    exercitationem. Dolores ipsum neque ea, autem natus explicabo amet aliquam harum hic blanditiis repellendus dicta dolorem doloribus modi fugiat quaerat sint repudiandae recusandae aut adipisci. Aliquam at repellendus illo nam.</p>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ipsum dolorem neque, nostrum commodi blanditiis tempore eum laboriosam facilis, tenetur nam earum. Esse expedita a perferendis? Consectetur autem neque natus nulla cupiditate qui laudantium
    nemo ea, cum quas eveniet molestiae, aut, fugit earum soluta assumenda corrupti consequatur saepe labore modi officia aspernatur. Ducimus est dignissimos ut voluptatem nesciunt nam sunt cum fugit magnam quae, sed odio aliquam delectus voluptatum laudantium
    exercitationem. Dolores ipsum neque ea, autem natus explicabo amet aliquam harum hic blanditiis repellendus dicta dolorem doloribus modi fugiat quaerat sint repudiandae recusandae aut adipisci. Aliquam at repellendus illo nam.</p>
</div>

CodePudding user response：

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 >
  <header >
    <div >
      <div >
        <div >
          <div >
            Col 1
          </div>
          <div >
            Logo here
          </div>
          <div >
            Socials
          </div>
        </div>
      </div>
    </div>
    <div >
      <div id="navbar" >
        <nav id="navbarSticky" >
          <div >
            <ul >
              <li >
                <a  href="/"><span >Home</span></a>
              </li>
              <li >
                <a  href="/about"><span >About</span></a>
              </li>
              <li >
                <a  href="/Contact"><span >Contact</span></a>
              </li>
              <li >
                <a  href="/FAQ"><span >FAQ</span></a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </header>
  <main >
    <div >
      <div >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 >
        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>