Technical document navbar hiding content

HTML-CSS
1

I’m working on the technical document page and almost have it. The navbar is hiding the left portion of the body. I have tried to change the margin of the body and main section and so many other things but the whole thing, including the navbar, shifts 25% over and doesn’t uncover the main text or nothing happens at all.

I’ve been researching and trying to figure this out for several weeks and I think my brain has finally died in the attempt. Does anyone have any advice on how to fix this?

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');




ul {
  list-style-type: none;
  margin:0;
  padding:0;
  width: 25%;
  background-color: #f1f1f1;
  height:100%;
  overflow:auto;
  display:block;
  position:fixed;
  

 
  
}

li a {
  
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  text-align:left;
  height:100%;
  }

  a:hover{color:darkgray;
         transition:.5s;

HTML

<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./styles.css">
      </head>
      <main id="main-doc">
                <nav id="navbar">
  <div class="mainnav">          
            <ul>
              <header class="head">Navigation</header>
              <li><a href="#storm_formation" class="nav-link">Storm Formation</a></li>
              <li><a  href="#tornado_genesis" class="nav-link">Tornado Genesis</a></li>
              <li><a  href="#Fujita_Scale" class="nav-link">Fujita Scale</a></li>
              <li><a href="#Storm_Chasing" class="nav-link">Storm Chasing</a></li>
              <li><a  href="#Climate_Change" class="nav-link">Climate Change</a></li>
              </ul>
            </nav>
            </div>
        <section class="main-section"  id="storm_formation">
          <header>Storm Formation</header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae elementum curabitur vitae nunc sed. Arcu ac tortor dignissim convallis aenean et. Rhoncus urna neque viverra justo nec ultrices. Morbi non arcu risus quis varius quam quisque id. Vulputate enim nulla aliquet porttitor. Quam elementum pulvinar etiam non. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Venenatis cras sed felis eget velit aliquet sagittis. In hendrerit gravida rutrum quisque. Aliquet porttitor lacus luctus accumsan tortor posuere. Dictum varius duis at consectetur lorem donec. Placerat duis ultricies lacus sed turpis. Nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Volutpat blandit aliquam etiam erat velit.

</p>
          <p></p>
          <li>
          <code></code>
          </li>
          </section>
          <section class="main-section"  id="tornado_genesis">
            <header>Tornado Genesis</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae elementum curabitur vitae nunc sed. Arcu ac tortor dignissim convallis aenean et. Rhoncus urna neque viverra justo nec ultrices. Morbi non arcu risus quis varius quam quisque id. Vulputate enim nulla aliquet porttitor. Quam elementum pulvinar etiam non. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Venenatis cras sed felis eget velit aliquet sagittis. In hendrerit gravida rutrum quisque. Aliquet porttitor lacus luctus accumsan tortor posuere. Dictum varius duis at consectetur lorem donec. Placerat duis ultricies lacus sed turpis. Nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Volutpat blandit aliquam etiam erat velit.</p>
            <p></p>
            <li>
            <code></code>
            </li>
          </section>
          <section class="main-section"  id="Fujita_Scale">
            <header>Fujita Scale</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae elementum curabitur vitae nunc sed. Arcu ac tortor dignissim convallis aenean et. Rhoncus urna neque viverra justo nec ultrices. Morbi non arcu risus quis varius quam quisque id. Vulputate enim nulla aliquet porttitor. Quam elementum pulvinar etiam non. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Venenatis cras sed felis eget velit aliquet sagittis. In hendrerit gravida rutrum quisque. Aliquet porttitor lacus luctus accumsan tortor posuere. Dictum varius duis at consectetur lorem donec. Placerat duis ultricies lacus sed turpis. Nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Volutpat blandit aliquam etiam erat velit.</p>
            <p></p>
            <li>
            <code></code>
            </li>
          </section>
          <section class="main-section"  id="Storm_Chasing">
            <header>Storm Chasing</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae elementum curabitur vitae nunc sed. Arcu ac tortor dignissim convallis aenean et. Rhoncus urna neque viverra justo nec ultrices. Morbi non arcu risus quis varius quam quisque id. Vulputate enim nulla aliquet porttitor. Quam elementum pulvinar etiam non. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Venenatis cras sed felis eget velit aliquet sagittis. In hendrerit gravida rutrum quisque. Aliquet porttitor lacus luctus accumsan tortor posuere. Dictum varius duis at consectetur lorem donec. Placerat duis ultricies lacus sed turpis. Nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Volutpat blandit aliquam etiam erat velit.</p>
            <p></p>
            <li>
            <code></code>
            </li>
          </section>
          <section class="main-section" id="Climate_Change">
            <header id="Climate_Change" >Climate Change</header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu vitae elementum curabitur vitae nunc sed velit. Vitae elementum curabitur vitae nunc sed. Arcu ac tortor dignissim convallis aenean et. Rhoncus urna neque viverra justo nec ultrices. Morbi non arcu risus quis varius quam quisque id. Vulputate enim nulla aliquet porttitor. Quam elementum pulvinar etiam non. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Venenatis cras sed felis eget velit aliquet sagittis. In hendrerit gravida rutrum quisque. Aliquet porttitor lacus luctus accumsan tortor posuere. Dictum varius duis at consectetur lorem donec. Placerat duis ultricies lacus sed turpis. Nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Volutpat blandit aliquam etiam erat velit.</p>
            <p></p>
            <li>
            <code></code>
            </li>
          </section>
  
          
        </main>

Screenshot 2023-03-15 at 4.03.44 PM
Screenshot 2023-03-15 at 4.03.44 PM1920×1200 226 KB

2

You need to push the content over to the right so that it isn’t hidden under the nav menu. Do you know of any CSS properties you could use to do that?

3

I’ve tried the margin-right on the ul and the main section. I’ve tried position:fixed and position:sticky, changed up the margin and padding, adjusted the width, added overflow:auto and I’ve tried float:right and adjusting the z-index. Not sure where to go next.

4

Can you give us an example of the CSS you tried? Give it your best shot. Don’t make too many changes all at once. You just need to push the main content over to the right so that it isn’t underneath the nav menu. This will not involve a lot of complex CSS, just one or two simple lines will do it. You might benefit from adding an additional HTML element, but I’m going to let you decide on how you want to do this.

So give it a try and then paste your updated CSS in here (even if it doesn’t work) so we can see what you tried and then we can help you from there.

5

Thank you so much for your help.! I added

.main-section{margin:25%} and adjusted the width of the navbar to 24% so they weren't butting up against each other so tightly.

Now there’s a huge empty space above both sides. sigh. I can scroll on the main text, but the sidebar isn’t covering the whole side.

Screenshot 2023-03-16 at 10.52.42 AM
Screenshot 2023-03-16 at 10.52.42 AM1920×1200 89.9 KB

I’ve added a .main-nav to the CSS and set the height to 100%, but that’s not doing anything. I’ll keep trying.

Added a top:0 and a left:0; and that worked! Now to resolve the spacing issues. Thank you so much for your help, again!

6

This sets all four side margins to 25%. Did you really need to do that? Or did you just need to set one of the side margins (perhaps the left side) to 25%?

7

I did realize that and changed it to margin-left. I got it all done and it looks great now!