why is my text not showing after the navigation bar?

Question

I am very new to this whole HTML/CSS thing. After looking up a few tutorials, I managed to make a basic navigation bar but now the problem is any text I enter does not appear under the navigation bar. Am I missing something?

HTML:

body{
    margin:0;
}

nav{
    position: fixed;
    top:0;
    width:100%;
    background-color:#f2bbac ;
    float: right;
    height:70px;
    font-family: 'Quicksand', sans-serif;
}
nav ul{
   list-style: none;
   padding:0;
   margin:0;
}
nav a{
    text-decoration: none;
    font-size: 20px;  
    color: white;
    text-transform: uppercase;
}
nav a:hover{
    color:gray;
}
nav li{
    display: inline-block;
    margin-left: 40px;
    padding: 20px;
}




    
    books
    



    
        
            Home
            About
            Contact Us
        
    
    hello there. testing

user_7509325 · Answer

It is due to position: fixed; property of nav. It makes underlying content start from top. You have to give some top-offset to h1. I have just added a spacer to body before h1

body {
    margin: 0;
}
 
nav {
    position: fixed;
 top: 0;
 width: 100%;
 background-color: #f2bbac;
 float: right;
 height: 70px;
 font-family: 'Quicksand', sans-serif;
}
  
nav ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
  
nav a {
 text-decoration: none;
 font-size: 20px;
 color: white;
 text-transform: uppercase;
}
  
nav a:hover {
 color: gray;
}
  
nav li {
 display: inline-block;
 margin-left: 40px;
 padding: 20px;
}





    
    books
    



    
        
            Home
            About
            Contact Us
        
    
    
    hello there. testing

user_9337829 · Answer

Applying position: fixed to an element removes it from the flow of elements on the web page and therefore your header is positioned from the very top of the page, ignoring the nav bar.

All you need to do is apply a top margin to the first element after the nav bar to poisition it below. This might be better done by placing the rest of your html within a content div and applying margin-top: 70px to that.


  hello there. testing



#content {
  margin-top: 70px; /* at least the height of you nav bar */
}

jsfiddle.net/bryanwadd/r1z350y2/

user_11373593 · Answer

Don't use float property for nav. Use it for ul instead.

try this code.

body{
    margin:0;
    padding:0;
}

nav{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background-color:#f2bbac ;
    height:70px;
    font-family: 'Quicksand', sans-serif;
}
nav ul{
   list-style: none;
   float: right;
}
nav a{
    text-decoration: none;
    font-size: 20px;  
    color: white;
    padding: 10px 10px;
    display : block;
    text-transform: uppercase;
}

user_896358 · Answer

Basically issue you are facing caused by having position:fixed on

tag, this attribute will make the browser to remove the nav from the rendering flow and treat it as if its not there, so to make you content after it appear, all you can do is to push all elements down using padding:70px or so, working snippet:

body{
    margin:0;
    padding-top: 70px;
}

nav{
    position: fixed;
    top:0;
    width:100%;
    background-color:#f2bbac ;
    float: right;
    height:70px;
    font-family: 'Quicksand', sans-serif;
}
nav ul{
   list-style: none;
   padding:0;
   margin:0;
}
nav a{
    text-decoration: none;
    font-size: 20px;  
    color: white;
    text-transform: uppercase;
}
nav a:hover{
    color:gray;
}
nav li{
    display: inline-block;
    margin-left: 40px;
    padding: 20px;
}




    
    books
    



    
        
            Home
            About
            Contact Us
        
    
    hello there. testing

why is my text not showing after the navigation bar?

4 Answers