Search code examples
cssreactjscss-position

How do I make this form center in my navigation bar ReactJS - CSS

I'm working on a web application, and I'm trying to center a div tag which is inside a flexbox, I don't understand why the flexbox isn't divided in three even parts.

My code

NavBar component

import React, { useState } from 'react';

import './UserCss/NavBar.css';
import logo from '../../resources/pngwing.com.png';
import menu_icon from '../../resources/pngwing.com-2.png';
import search_icon from '../../resources/search.png';

export default function NavBar() {
  const [menuState, setMenuState] = useState('close-menu-list');

  const clickToogleMenuHandler = () => {
    if (menuState === 'close-menu-list') {
      setMenuState('open-menu-list');
    } else {
      setMenuState('close-menu-list');
    }
  };

  return (
    <div className='container'>
      <div className='navbar'>
        <img src={logo} alt='logo' className='navbar__logo' />
        <form className='navbar__searchbar'>
          <input type='text' placeholder='Rechercher'></input>
          <button type='submit'>
            <img src={search_icon} alt='search_icon' />
          </button>
        </form>
        <nav>
          <ul className={menuState}>
            <li>
              <a href='/'>Oeuvres</a>
            </li>
            <li>
              <a href='/'>Me contacter</a>
            </li>
          </ul>
        </nav>
        <img
          src={menu_icon}
          alt='menu icon'
          className='navbar__menu-icon'
          onClick={clickToogleMenuHandler}
        />
      </div>
    </div>
  );
}

Navbar CSS file

.container {
  width: 100%;
  min-height: 100vh;
  padding-left: 8%;
  padding-right: 8%;
  box-sizing: border-box;
}

.navbar {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #c70039;
}

.navbar__logo {
  width: 50px;
  cursor: pointer;
  margin: 30px 0;
}

.navbar-searchbar {
  /*TODO*/
}

.navbar__menu-icon {
  width: 25px;
  cursor: pointer;
  display: none;
}

nav {
  flex: 1;
  text-align: right;
}

nav ul li {
  list-style: none;
  display: inline-block;
  margin-right: 30px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}

nav ul li a:hover {
  color: #c70039;
  text-shadow: 2px 2px 2px grey;
}

nav form {
  display: inline-block;
  position: relative;
}

nav form input {
  background-color: #c70039;
  opacity: 0.5;
  border-style: none;
  border-radius: 15px;
  height: 30px;
  padding-left: 10px;
}

nav form input::placeholder {
  color: ;
  opacity: 100;
}

nav form img,
button {
  max-width: 15px;
  border: 0px;
  background-color: transparent;
  position: absolute;
  right: 6px;
  top: 3.5px;
}

@media only screen and (max-width: 700px) {
  .navbar__menu-icon {
    display: block;
  }

  nav ul {
    margin-right: 15px;
    width: 100%;
    position: absolute;
    top: 100px;
    right: 0;
    z-index: 2;
  }

  nav ul li {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .open-menu-list {
    max-height: 130px;
    overflow: hidden;
    transition: 0.5s;
  }

  .close-menu-list {
    max-height: 0px;
    overflow: hidden;
    transition: 0.5s;
  }
}

Issues

As you can see in the picture below, my navigation bar is divided in three parts, and I want to center the search bar, I mean the form, but despite all my tries, I can't find a solution. The form that I want to center is the form tag inside the div tag which has "navbar" as a className.

Screen that shows how my navigation bar is d

I apologise if isn't clear enough, or if there is some crucial information missing, feel free to tell me if there is any issues.

I added your solutions but it doesn't work, here is the result below.

response1

Solution

  • Firstly remove flex: 1 from nav. This is causing that element to take up all available space which in turn leaves the search bar nowhere to go. flex: 1 is saying "I would like you expand as much as you possibly can", which means that element is essentially pushing everything else to the side and leaving no room.

    Secondly, add margin-left: auto and margin-right: auto to the .navbar__searchbar class. This will cause the element to add margins that fill the space to the left and right of the search equally, which in turn means it's in the middle. This is a lesser-known trick in flex-world.

    So in short:

    // No more flex: 1 here
nav {
  text-align: right;
}

.navbar__searchbar {
   position: relative
   margin-left: auto;
   margin-right: auto;
}

    There is another way also. As well as removing that flex: 1 on nav as before, you add a flex: 1 to the .navbar__searchbar which means that element now takes up all the remaining space (but contents are still left aligned), then you centre its contents.

    Doesn't matter what you do here.

    That would look like:

    // No more flex: 1 here
nav {
  text-align: right;
}

.navbar__searchbar {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
}