Dean Friedland Dean Friedland - 7 months ago 15
HTML Question

Adding padding to the top of body is not fixing the issue with navbar covering content

Below is my HTML and CSS code for a portfolio site that I am creating. My issue is tht when I added my logo to the navbar (which increased the navbar's width) the content started covering the top of each anchor's content. For example, when I click on the "About" anchor it will go to that seciton but the top of the section is covered by the navbar's increased width. I followed the instructions on Bootstraps documentation as well as others on stackoverflow that said to add paddding or margin to the top of the body element but it does not work. Can someone look at my code and tell me if I am doing something wrong?

What it should look like: https://www.script-tutorials.com/demos/391/index.html#services

What mine looks like: https://bootstrap-parallax.herokuapp.com/#services

HTML:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand-centered" href="#">
<img src="img/logo2.png" alt="" />
</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-left">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#information">Resume</a></li>
<li><a href="#map">Contact</a></li>
<li><a href="https://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/">Blog</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


CSS:

/*this changed a heading text color to white*/
.h1, h1 {
color: white;
}

/*this changed another heading text color to white*/
.h3, h3 {
color: white;
}

/*this vertically centered the navbar links after the logo made navbar too wide*/
.navbar-nav li a {
line-height: 35px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: medium;
}

/*this centers the logo on the navbar*/
@media screen and (min-width:768px){
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 160px;
text-align: center;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -160px;
}
}

/*this pushed the left navbar links to the right */
.navbar-left {
padding-left: 75px;
}

/*this pushed the right navbar links to the left*/
.navbar-right {
padding-right: 75px;
}

/* general styles */
html, body {
height: 100%;
width: 100%;
}

/* padded section */
.pad-section {
padding: 50px 0;
}
.pad-section img {
width: 100%;
}

/* vertical-centered text */
.text-vcenter {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vcenter h1 {
font-size: 4.5em;
font-weight: 700;
margin: 0;
padding: 0;
}

/* additional sections */
#home {
background: url(../img/Slide2.jpg) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#about {
}

#services {
background-color: #306d9f;
color: #ffffff;
}
#services .glyphicon {
border: 2px solid #FFFFFF;
border-radius: 50%;
display: inline-block;
font-size: 60px;
height: 140px;
line-height: 140px;
text-align: center;
vertical-align: middle;
width: 140px;
}

#information {
background: url(../img/Slide.jpg) no-repeat center center fixed;
display: table;
height: 800px;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information .panel {
opacity: 0.85;
}

#map {
/*width: 500px;*/
height: 500px;
}

footer {
padding: 20px 0;
}
footer .glyphicon {
color: #333333;
font-size: 60px;
}
footer .glyphicon:hover {
color: #306d9f;
}

body {
padding-top: 65px;
}

Answer

Since the navbar width is now increased, we have to increase the padding for the div as well to keep the view intact.

.pad-section { padding: 100px 0; }

The original template has particular navbar height for particular div padding. Since you changed the navbar, you have to change the div padding as well