Nav Bar Text Not Centering & Covering Text

Question

I have an html page that "contains" many pages meaning I have links at the top of the page but when they are clicked you are not actually taken to a new page. The links stay on the same page but just take you to another part of the same html page. (I think this is called single page layout with multiple pages, I forget). My page is split into 4 sections, and the first section under the nav bar contains the least amount of text. I'm not sure why but the nav bar is cutting off my p tag text. It looks like the text is covered under the nav bar.

• I'm not sure how to stop the nav bar from covering my text
• Another problem I'm having is the nav bar itself, I'm trying to center the text inside and also make the nav bar extend the full width of my page.

I tried things like padding, margin, and text align but I'm still having trouble with these 2 things. Can someone please help me out? Thanks.

Code:

    nav {
        width: 100%;
        background: #1B2631;
        overflow: hidden;
        position: fixed;
        top: 0;
    }

    ul {

        list-style: none;
    }

    li {
        text-align: center;
        float: left;


    }

<nav>
    <ul>
        <li><a href="#page1">page1</a>
        </li>
        <li><a href="#page2">page2</a>
        </li>
        <li><a href="#page3">page3</a>
        </li>
        <li><a href="#page4">page4</a>
        </li>
        <li><a href="#page5">page5</a>
        </li>
    </ul>
</nav>

Answer 1

I made the ul in your nav a flexbox parent, and then centered the contents via justify-content: center. For the inner "pages", I gave each one some upper padding, to ensure it clears the height of the fixed nav menu.

Some more explanation. The following block targets section elements which are direct children of the pages class. I did it this way so that nested sections would not be targetted accidentially.

.pages>section {
  padding: 3em 1em 2em;
}

The next thing to explain is this block. It removes bottom margin from the last p in the long list of ps I included in the sections. This is so the spacing at the bottom of each section looks even.

.pages p:last-child {
  margin-bottom: 0;
}

Here's a possible implementation of this.

html {
  scroll-behavior: smooth;
}

.pages>section {
  padding: 3em 1em 2em;
}

.pages p:last-child {
  margin-bottom: 0;
}

#page1 {
  background-color: yellow;
}

#page2 {
  background-color: red;
}

#page3 {
  background-color: gray;
}

#page4 {
  background-color: purple;
}

#page5 {
  background-color: orange;
}

nav {
  width: 100%;
  /*       background: #1B2631; */
  background: #ccc;
  overflow: hidden;
  position: fixed;
  top: 0;
}

ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul a {
  padding: 0 1em;
}


body {
  margin: 0;
  font-family: sans-serif;
}

<nav>
  <ul>
    <li><a href="#page1">page1</a>
    </li>
    <li><a href="#page2">page2</a>
    </li>
    <li><a href="#page3">page3</a>
    </li>
    <li><a href="#page4">page4</a>
    </li>
    <li><a href="#page5">page5</a>
    </li>
  </ul>
</nav>


<div class="pages">

  <section id="page1">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page2">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page3">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page4">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>

  <section id="page5">
    <h2>Page Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ducimus pariatur atque quo nobis aliquid a accusantium soluta tempora dicta, eveniet harum adipisci voluptatibus, minima aliquam quasi perferendis delectus, voluptatem!</p>
  </section>


</div>

jsFiddle

Answer 2

Just added Some CSS menu text align center. hope this help you.

nav {
  width: 100%;
  background: #1B2631;
  overflow: hidden;
  position: fixed;
  top: 0;
}

ul {
  list-style: none;
  text-align: center;
}

li {
  text-align: center;
  float: none;
  display: inline-block;
  padding: 5px 15px;
}

<nav>
  <ul>
    <li><a href="#page1">page1</a>
    </li>
    <li><a href="#page2">page2</a>
    </li>
    <li><a href="#page3">page3</a>
    </li>
    <li><a href="#page4">page4</a>
    </li>
    <li><a href="#page5">page5</a>
    </li>
  </ul>
</nav>