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

Html – How to perform left-right alignment for navbar in css

I am trying to make left-right alignment for navbar in reactjs but I do not know how to make it for right icons. The icons remains in vertical and I would like to learn how to split them into left and right part. This is the code I have so far. Thanks for your help very appreciated.

const Home = () => {
  return (
    <>
        <section className='navbar-container'>
            <div className='navbar_left'>
                   <div className='logo'>
                            <img src={logo} alt=''/>
                   </div>
                   <div className='searchbox'>
                             <input type='text' placeholder='Search for products...'/>
                             <button type="submit"><i><Fas.FaSearch/></i>
                             </button> 
                   </div>
            </div>
            <div className='navbar_right'>
                  <div className='cart'>
                           <i><Fas.FaShoppingCart/>Carrito</i>  
                  </div>
                  <div className='delivery'>
                           <i><Delivery.CiDeliveryTruck/>Pedidos</i>
                  </div>
                  <div className='login'>
                           <button type='submit'>Acceder</button>
                  </div>
            </div>
        </section>
    </>
  )
}

export default Home

#css
.navbar-container{
    background-color: #2c143e;
    width: 100%;
    height: 100%;
}

.navbar-left{
    width: 100%;
    display: flex;

}

img{
    width: 10%;
    height: 100px;

}

This is the image I have:
Evidence

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I have made display and justify-content as you mentioned. Thanks but I have this scenarioEvidence2

    How to center the searhbox next to the logo on the left and the icons from the right to be horizontal? Thanks a lot


  2. 0

    You could also always put a placeholder in the middle an define the space every element has with percentages.

    Login or Signup to reply.
  3. 0

    You can do something like

    .navbar-container{
    background-color: #2c143e;
    width: 100%;
    display: flex;
   justify-content: space-between; // This will create two parts, left and right
}

.navbar-left{
    width: 100%;
    display: flex;

}

img{
    width: 10%;
    height: 100px;

}

    Based on your answer below, that was not visible, if you want to make individual elements horizontal, just add the following:-

    .navbar__left {
  display: flex;
  align-items: center;
}

.navbar__right {
 display: flex;
 align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search