Question 298500 in Html Question posted in
Some basic documentation can be found here.

Html – Flexbox navigation bar

<nav id="navbar">
    <div id="logo">
        <img src="logo.png" alt="www.lunchbox.com">
    </div>
    <ul>
        <li class="item"><a href="#home">Home</a></li>
        <li class="item"><a href="#services-container">Services</a></li>
        <li class="item"><a href="#contact">Contact Us</a></li>
        <li class="item"><a href="loginsignup.html">Login/ Signup</a></li>
    </ul>
</nav>



#navbar ul{
    display: flex;
    font-family: 'Baloo Bhai', cursive;
}


#navbar ul li{ 
    list-style: none;
    font-size: 1.3rem;
    align-items: end;
}


#navbar ul li a{
    color: white;
    display: block;
    padding: 3px 22px;
    border-radius: 20px;
    text-decoration: none;
}



#navbar ul li a:hover{
    color: black;
    background-color: white;
}

in flex box navigation bar how to make one element on right side(Login/signup) and rest home, about on left. I am using a list then making it flex box.
as you can see, there might be some problem with html and I might have to remove the last one from the unordered list so that I can span it to the right side.

Tags:

2

Answers


  1. 0

    This is how you can do this update this css code :-

          nav#navbar {
        display: flex;
        align-items: center;
    }
    #navbar ul {
        display: flex;
        font-family: 'Baloo Bhai', cursive;
        flex-grow: 1;
    }

#navbar ul li{ 
    list-style: none;
    font-size: 1.3rem;
    align-items: end;
}

#navbar ul li a {
    color: #000;
    display: block;
    padding: 3px 22px;
    border-radius: 20px;
    text-decoration: none;
}
#navbar ul li:last-child {
    margin-left: auto;
}

#navbar ul li a:hover{
    color: black;
    background-color: white;
}
    Login or Signup to reply.
  2. 0

    It’s just an example, do it yourself.

    <div class="parent">
  <div class="child-left">
     <img src="" alt="alt">
     <a href="#">Home</a>
     <a href="#">About</a>
  </div>
  <div class="child-right">
    <a href="#">Login/Signup</a>
  </div>
</div>

    .parent{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
}

.child-left{
 display: flex;
 width: 75%;
 gap: 15px;
}
.child-right{
  width: 25%;
}

    This will look like this

    logo Home About ..                  login/signup

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search