**I want move div of className Navbar_icon to the right side of the navbar. Navbar_icon contains search, help, sign in. I want move div of className Navbar_icon to the right side of the navbar. Navbar_icon contains search, help, sign in. ** Image of current navbar : <>

REACT COMPONENT JSX CODE :

            <div className="Navbar">
                <h1 className="logo">eat24/7</h1>
                <div className="Navbar_icons">

                    <div className="Search">
                        <SearchRoundedIcon />
                        <p>Search</p>
                    </div>


                    <div className="Help">
                        <HelpOutlineTwoToneIcon />
                        <p>Help</p>
                    </div>


                    <div className="Sign_In">
                        <PersonOutlineIcon />
                        <p>Sign In</p>
                    </div>
                </div>
            </div>

CSS CODE :
.Navbar{
    height: 80px;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 35px;
    display: flex;
}
.logo{
    font-family: 'Andada Pro', serif;
    color: orangered;
    font-weight: bolder;
    float: left;
}

.Navbar_icons{
    display: flex;
    position: relative;
    float: right;
}

.Search, .Help, .Sign_In{
    display: flex;
    margin-right: 10px;
    text-align:center;
    
}

CodePudding user response：

get rid of the floats and add justify-content: space-between and a width to the .Navbar

CodePudding user response：

You can do this by using CSS flex-box. You can set the parent container to flex and then give margin-left: auto to the child container that you want to push to the right. Note - for this to work properly the parent container needs flex-wrap and flex-direction properties. In this way no matter the width of the container it will always be pushed to the right. See the code snippet below:

.Navbar {
  height: 80px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.logo {
  font-family: 'Andada Pro', serif;
  color: orangered;
  font-weight: bolder;
}

.Navbar_icons {
  margin-left: auto;
  display: flex;
}

.Search,
.Help,
.Sign_In {
  display: flex;
  margin-right: 10px;
  text-align: center;
}

<div class="Navbar">
  <h1 class="logo">eat24/7</h1>
  <div class="Navbar_icons">

    <div class="Search">
      <SearchRoundedIcon />
      <p>Search</p>
    </div>


    <div class="Help">
      <HelpOutlineTwoToneIcon />
      <p>Help</p>
    </div>


    <div class="Sign_In">
      <PersonOutlineIcon />
      <p>Sign In</p>
    </div>
  </div>
</div>

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

CodePudding user response：

When using flexbox, you don't need floats. In fact, don't ever use floats unless you are absolutely sure that there is no other solution and world is going to collapse if you don't use floats.

What you need is some more flexbox settings in your .Navbar selector to make it spread its children away from each other. justify-content does exactly that. What you need is space-between as its value.

Please refer to this masterpiece of a flexbox tutorial if you want to explore more of flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/