Image overlaps Nav that has a Fix Position

I have a Flex Nav that is position: fixed. The image lower on my page prestige appears to the right side and overlaps Nav. The image needs to remain at the bottom of the page. Here is the screenprint.

WoW!! I’m so happy for all the responses!

The image that you showed is CORRECT! The Image should in the center expanding to the bottom of the page.

The Nav Bar should have ZARA and the links in the middle beside it.
This is why I chose Flex.

Here is the Example:

ZARA Home Gallery Service Contact

Welcome to the forums, @Loranne.

The first thing you want to do is run your HTML through the validator and fix the errors.

2 Likes

That’s because you have your body content inside your navigation.

All of this should be outside your class=“nav” area

    <h1>About Zara Delicious Foods</h1>

    <img class="cover" src="images/Prestige.jpeg" alt="Delicous Food">

    <div class="content">
      <h3>What is Prestige</h3>
    </div>

2 Likes

You haven’t closed any of the divs for the class=“links” so you have ended up with 8 nested divs instead.

Fix the html as @technobear said and I guess you will end up with something like this:

  <div class="nav">
    <img class="logo" src="images/logo.png" alt="Zara Delicious Food">
    <div class="link">
      <a href="index.html">Home</a>
    </div>
    <div class="link">
      <a href="pages/gallery.html">Gallery</a>
    </div>
    <div class="link">
      <a href="pages/services.html">Services</a>
    </div>
    <div class="link">
      <a href="pages/contact.html" target="_blank">Contact</a>
    </div>
  </div>
  <h1>About Zara Delicious Foods</h1>
  <img class="cover" src="images/Prestige.jpeg" alt="Delicous Food">
  <div class="content">
    <h3>What is Prestige</h3>
  </div>

I don;t know what you are doing with all the grid styles on the body as they don’t match your content. I would get rid of all of them until you are sure you know why they are in place and how they affect the content.

body {
  margin: 0;
  /* max-width: 100vw; */
  min-height: 100vh;
  font-family: "Roboto", san-serif;
  font-weight: 300;
  color: #444444;
  background-color: #ac4c4c;
  /* display: grid; */
  /* grid-template-columns: 5% 25% 25% 20% 20% 5%; */
  /* grid-template-rows: 8% 10% 15% 25% 25% 15% 20%; */
}

Rather than use position:fixed you should use position sticky and then your content won’t be obscured until you start scrolling.

.nav {
  display: flex;
  position:-webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100%;
  padding: 0.1%;
  background-image: linear-gradient(
    30deg,
    rgb(22, 95, 116),
    #c47977,
    #449797,
    #1a46d4
  );
  z-index: 3;
}

It should then roughly like this although I have no idea if that’s what you wanted :slight_smile:

You probably want that image to be width:100% or max-width:100% depending on circumstance but I don;t really know how it should look anyway as you said you wanted it on the bottom?

img.cover{
  max-width:100%;
  height:auto;
}

Once you have the html validated and in the right order then you can start putting your grid rules back in place but it looks as though you are making this more complicated than it needs to be. If you are using grid then make sure you place stuff exaclty where it should be in the grid and that your columns and rows match up to the content you have.:slight_smile:

3 Likes

Dear PaulOB,

You are AWESOME and so right! I didn’t close the HTML div and now my NAV is working!! I’m able to create a NAV that’s Flex and my picture is aligning well with the GRID.

Thank you SOOOOO Much!! :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.