Product Landing Page -Header/Nav Bar

Hello,

This is my first post so apologies if I did not follow the correct procedures.

I have been searching via the web through the various resources but cannot find a solution to this problem. Maybe it is past the scope of this project. I am trying to make the header and nav bar of my page mobile friendly but I cannot seem to figure it out.

Link to the page

https://codepen.io/rundownx2020/pen/wvGojpL

Thank you for the help.

1 Like

Without going to crazy you could make the following changes to the nav ul element,


nav > ul {
/*  Make width 100% of its container */
  width: 100%;
  display: flex;
/*  Make the flex container wrap when its exceeding its width */
  flex-wrap: wrap;
/*  Dont need this line of code below, flex is auto set to row unless you change it to column  */
  flex-direction: row;
  justify content: space-between;
  list-style-type: none;
}

Here try this code. Also just a friendly reminder image tags don’t need a closing

HTML:

<body class="bodycontainer">
     <header>
       <nav>
         <div class="logo-section">
              <div class="header-title">Classic N64 Video Games</div>
             <img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRzgVnopGmi8w-Re0yzil2Y_tR0jAB3MeYztA&usqp=CAU" alt="logo">
         </div>
          <ul class="nav-links">
              <li><a class="nav-link" href=#games>Games</a></li>
              <li><a class="nav-link" href=#theconsole>The Console</a></li>
              <li><a class="nav-link" href=#contact>How To Contact</a></li>
              <li><a class="nav-link" href=#pricingshipping>Pricing & Shipping</a></li>
           </ul>
       </nav>
</header>


CSS:



@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');

 
.bodycontainer {
  background-color: #5FFBF1;
}

/* Utilities */

ul {
  list-style-type: none;
}

/* Nav Set Up */

nav {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

/* Logo Section */

.logo-section {
  display: flex;
  align-items: center;
  margin: 0 auto;
}


 .logo-section .header-title{
   color: red;
   font-family: 'Do Hyeon', sans-serif;
   font-size: 1.6rem;
   margin-right: 0.25rem;
}

.logo-section img {
  border-radius: 50%;
  width: 150px;
}

/* Nav Links */

.nav-links {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.nav-links li a {
  margin-right: 1rem;
  color: black;
  font-size: 1.2rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 2s ease;
  padding: 0.5rem;
}

/* Hover Effect */

.nav-links li a:hover {
background: #5FCBF9;
border-radius: 5px;
}

/* Media */

@media (max-width:1400px){
  nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 15rem;
  }
}


Hi,

Thank you for the answer. This is helpful and I learned a few other tricks along the way from this response as well. I think I still need some work to get what I want but this definitely solves the answer to my question.

Thank You!