Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Nav

Why The Paragraph Is Hidden Behind Navbar However Navbar Comes First In Html Source?

Post a Comment
I dont know but my paragraph goes behind of my navbar I am new in html and css Below is the code

Solution 1:

This is happening because nav has been assigned position: fixed to the top , so now whatever the height of nav is occupied on the screen that will remain fixed i.e. allocated to it no matter what and other content on the body will operate in normal behavior neglecting the position of nav so assigning a padding space equal to the navheight may resolve the issue.

body {
    background-color:white;
}

nav {
    background-color:blue;
    /* happening because of this */position:fixed ;
    top:0;
    left:0;
    right:0;
}
li {
    display:inline-block;
    padding: 5px;
    margin:10px;
    color:white;
}
/* add this */p{
padding-top: 75px;
}



li.b:hover {
    border-bottom:red;
}
<!DOCTYPE html><html><head><metacharset="utf-8"><title> First App </title><linkrel="stylesheet"href ="style.css"></head><body><header><nav><ul><liclass = "a"><ahref = "#"> Google </a></li><liclass = "b"><ahref = "#"> Youtube </a></li><li><ahref = "#"> Facebook </a></li><li><inputtype="text"><button> Press Here </button></li></ul></nav></header><p> 
        Lorem, ipsum dolor sit amet consectetur adipisicin
        g elit. Est tempora quasi ipsum commodi
        . Atque ut officia magnam et eaqu
        e dolorum incidunt? Hic eos
         ipsam assumenda itaque dese
         runt voluptas porro libero?
         Lorem, ipsum dolor sit amet consectetur adipisicin
         g elit. Est tempora quasi ipsum commodi
         . Atque ut officia magnam et eaqu
         e dolorum incidunt? Hic eos
          ipsam assumenda itaque dese
          runt voluptas porro libero?
          Lorem, ipsum dolor sit amet consectetur adipisicin
        g elit. Est tempora quasi ipsum commodi
        . Atque ut officia magnam et eaqu
        e dolorum incidunt? Hic eos
         ipsam assumenda itaque dese
         runt voluptas porro libero?
         Lorem, ipsum dolor sit amet consectetur adipisicin
         g elit. Est tempora quasi ipsum commodi
         . Atque ut officia magnam et eaqu
         e dolorum incidunt? Hic eos
          ipsam assumenda itaque dese
          runt voluptas porro libero?
         
        </p></body></html>

Post a Comment for "Why The Paragraph Is Hidden Behind Navbar However Navbar Comes First In Html Source?"