Product Landing Page -Header/Nav Bar


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

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


<body class="bodycontainer">
         <div class="logo-section">
              <div class="header-title">Classic N64 Video Games</div>
             <img id="header-img" src="" alt="logo">
          <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>


@import url('');

.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;


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!