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>