Gap Between Nav Bar and Top of Page

HTML-CSS
1

Hey folks,

I have an unfortunate question. And, I say unfortunate because I rarely if ever have HTML/CSS questions LOL! And I now happen to have one::neutral_face:

I can’t figure out for the life of me, why one of my web pages has a big gap between the nav bar and the top of the page, and the other doesn’t. And for both pages the navbar html and css are the exact same!

See screenshots below:

nav%20bar%20html%20issue%202
nav%20bar%20html%20issue%2021361×661 145 KB

nav%20bar%20html%20issue%201
nav%20bar%20html%20issue%2011364×658 145 KB

Here is the html code for both pages:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

And here is the css code for both pages:

/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}

2

Hello pal,

You may please share your work with an online service like codepen and share the link please?

You may check the parent of nav in the page has big cap. I think the parent has some top margin or top padding that shifts the navigation from top.

3

“You may check the parent of nav in the page has big cap.” There you go! What a big dumb-@$$ I am! I had body { margin: 100px; } …smh wow! :zipper_mouth_face:

And sometimes, I don’t include a Code Pen or GitHub link for certain reasons. And in those instances when I don’t, I usually provide the specific code where the problem is, or show a video/GIF.

4

I understand the privacy stuff about the code, this is accepted, we respect. but with gif/video we just may guess about the problem just as I provided my thoughts.

The good part is you really find the issues easy and fast yourself. About the sharing code, you could share juts part of the work you think could cause the problem.

Keep working on great work, happy coding.

1 Like
5

Thanks! You are awesome man…damn awesome!