Bootstrap fixed nav bar ignoring columns within divs

1

Hi there, I had a quick question on making a page with bootstrap elements in codepen. When attempting to make a fixed to the top navbar any bootstrap columns will ignore the overflow:hidden property of the navbar class. This leads to column’s text overwriting my fixed navbar elements. Any help would be greatly appreciated.

A codepen demonstrating the issue: https://codepen.io/mwg6/pen/wddPJW

CSS

.background{
  background-color:lightblue;
}
.div1{
  margin-left:15%;
  margin-right:15%;
  border-style:ridge;
  border-width:2px;
  text-align:center;
  background-color:#f4a442;
}
.menu {
    overflow: hidden;
    background-color: #333;
   width: 100%;
  height:20px;
   position: fixed;
    left: 0;
    top: 0;
    
}
.menu a {
    float:left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding-right: auto;
  padding-left:auto;
    text-decoration: none;
}

HTML

<body class = "background">
    <div class="container menu">
      <div class="row">
    <div class="col-sm-4">
      <a href="#home">Home</a>
      </div>
    <div class="col-sm-4">
  <a href="#news">News</a>
      </div>
    <div class="col-sm-4">
  <a href="#contact">Contact</a>
      </div></div>
  </div>
  <div class = "div1" id = "contact">
    <h1>Contact Me</h1>
 
       <div class = "container">
       
  <div class="row">
    <div class="col-sm-6">
      
        <h3>asdasd</h3>

    </div>
    <div class="col-sm-6">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
         
         </div>
       </div>
  </div>
  <div class = "div1">
    <h1>additional text to force scroll</h1>
    <p>text</p>
       <p>text</p>
         <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
         </div>
</body>
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

A link to codepen could also help :slight_smile:

3

I think you’d get more responses if you post your code snippet on codepen, and link to it. (Instead of the user setting everything… time consuming to cleanup your pasted html code with all the >> symbols.)

4

Thanks! Fixed it. First post appreciate the guidance.

5

Thank you so much! First post, I appreciate the guidance immensely!

6

On your .menu class, add

z-index: 100;

This makes the navbar on a higher Z plane, so your content scrolls underneath it.

And suggestion, for height, instead of hardcoding 20px, you can use say

height: 2em;

then on your .div1, you can add margin-top so it doesn’t get covered by your navbar

margin-top: 2em;