Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I am trying to keep my navigation fixed at the top on right side however i am having issues.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./styles.css">

</head>
<body>
  <!-- START NAV -->
  <nav id='navbar' class='nav'>
    <ul class='nav-list'>
      <li>
      <a href='#About'>About</a>
      </li>
      <li>
      <a href='#Projects'>Projects</a>
      </li>
      <li>
      <a href='#Contact'>Contact</a>
      </li>
      </ul>
  </nav>
  <!-- END NAV -->
  <section id='welcome-section' class='welcome-section'>
    <h1>My Portfolio</h1>
    <p>SEO Strategist</p> 
  </section>
  <section id='projects' class='projects-section'>
    <div class='project-grid'>
      <a id ='profile-link' class='project-tile' target='_blank'>
        <img class='' src='' alt=''
      </div>
    </section>
    <section id='contact' class='contact-section'>
      <div class='contact-section-header'>
        <h2>If you are interested in any SEO projects, let's work together</h2>
        <p>'World class SEO strategy projects!!!!'</p>
        <div class='contact-links'>
          <!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
          <a href="#" class="fa fa-facebook"></a>
          <a href="#" class="fa fa-twitter"></a>
          <a href="#" class="fa fa-linkedin"></a> 
          <a href="#" class="fa fa-instagram"></a> 
          </div>
      </section>
      <section class="text">
        <p class="first-paragraph">
          I have years of experience in the SEO field stemming from working in some of the best agencies in the country. Please find examples of my work below.
        </p>
        </section>
       <section>
        <img src='https://yarro.org/wp-content/uploads/2022/03/seo-strategy-5-step-framework.jpg' alt='SEO Strategy' 
  loading='lazy' width="350"
     height="200"
     />
        </section>
</body>
</html>
/* file: styles.css */
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--main-red);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    z-index: 10;
}

@media only screen and (max-width: 700px) {
  body {
    background-color: lightblue;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

I just tested your code and it appears to be doing what you say you want it to do, but perhaps I am not understanding correctly? Can you be a little more specific about what the problem is?

sorry i meant that the ‘My Portfolio’ and ‘SEO strategist’ sections move and i want it to be fixed like the navigation at the top

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