I am having a problem with the CSS of the navbar of a Website. Please help me move the items to the right side and deal with responsiveness.

HTML:

<nav>
        <a href="#" class="logo"><img src="./images/logo.png" height="120" width="120"></a>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">How to MUN</a></li>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS:

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
}

nav {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 30px 90px;
    z-index: 99;
  }
  
  nav .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  
  nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  nav ul li {
    list-style: none;
    margin-left: 20px;
  }
  
  nav ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #ffff;
    border-radius: 20px;
  }
  
  nav ul li a:hover,
  .active {
    background: #fff;
    color: #2b1055;
  }

I have tried many times but I am not able to fix the problem. The items always stick together.

CodePudding user response：

body,
html {
 height: 100%;
 margin: 0;
 font-size: 16px;
 font-family: "Lato", sans-serif;
 font-weight: 400;
 line-height: 1.8em;
 color: #666;
}


nav {
 position: relative;
 background: rgb(31, 30, 30);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 30px 90px;
 z-index: 99;
}

nav .logo {
 color: #fff;
 font-weight: 700;
 text-decoration: none;
 font-size: 2rem;
 text-transform: uppercase;
 letter-spacing: 2px;
}

nav ul {
 display: flex;
 justify-content: center;
 align-items: center;
}

nav ul li {
 list-style: none;
 margin-left: 20px;
}

nav ul li a {
 text-decoration: none;
 padding: 6px 15px;
 color: #fff;
 border-radius: 20px;
 white-space: nowrap;
}

nav ul li a:hover, .active {
 background: #fff;
 color: #2b1055;
}

/* breakpoint for mobile */
@media screen and (max-width: 768px) {
 nav {
  flex-direction: column;
  padding: 20px 0px;
 }
}

if you want more advance responsive menu, you can hide the nav menu and add hamburger button then use css :focus to expand nav menu when click on hamburger button or use some javascript/jquery code

CodePudding user response：

Try this

I have added a media query for a responsive view. When the resolution goes below 768px, the navbar changes to column view

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
}

nav {
    display: flex;
    align-items: center;
    padding: 12px 90px;
    z-index: 99;
    background-color:#7c7c7c;
  }
  
  nav .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  
  nav ul {
    display: flex;
    justify-content: right;
    align-items: center;
    width:100%;
  }
  
  nav ul li {
    list-style: none;
    margin-left: 20px;
  } 
  
  nav ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #ffff;
    border-radius: 20px;
  }
  
  nav ul li a:hover,
  .active {
    background: #fff;
    color: #2b1055;
  }

@media only screen and (max-width: 767px){
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding:0px;
    margin-bottom:0px;
  }
  nav ul li{
    margin-left:0px;
    margin-bottom:5px;
  }
}

<nav>
     <a href="#" class="logo"><img src="https://images.unsplash.com/photo-1557053964-937650b63311?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=997&q=80" width="80"></a>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">How to MUN</a></li>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

First of all, you need to make the position relative.

secondly;

• set width of 100%
• float the to right and add margin-right to how many pixels you wish.