I want to make navbar responsive and the only thing I can't fix it is basket icon which always moves to the sides depends on size of the screen, how can I make it in the middle position does not matter what size of the screen?

Here is css code:

/* Nav Bar Styling */

a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 70px;
  box-shadow: rgba(50, 50, 93, 0.23) 0px 30px 30px -20px;
  /* max-width: 100vw;
  overflow: hidden; */
}
.logo {
  font-size: 30px;
}
.nav-links {
  display: flex;
  justify-content: flex-end;
  width: 75%;
  margin: 30px;
}

.nav-links li {
  color: black;
  font-size: 20px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  text-transform: capitalize;
}
.hero {
  text-align: center;
  margin-top: 15%;
}
.hero h1 {
  text-align: center;
  font-size: 80px;
}
.mobile-menu-icon {
  display: none;
}
button {
  border: none;
  text-decoration: none;
  font-size: 20px;
  background: none;
}
/* Creating a circle with number of items */
.num-items {
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  bottom: 0;
  right: 18px;
  /* transform: translate(-425%, -2095%); */
  border-radius: 50%;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* basket */
#basket {
  background-color: #fff;
  width: 2rem;
  height: 2rem;
  position: relative;
  border: none;
  border-radius: 50%;
  outline: none;
  color: #4d77ff;
  margin: 10px 30px;
}

.basket {
  margin-top: 10px;
  position: relative;
}

/* =======Mobile====== */
@media (max-width: 768px) {
  .logo {
    display: flex;
    position: absolute;
    top: 15px;
    left: 35px;
  }
  .nav-links {
    display: none;
  }
  .nav-links-mobile {
    position: absolute;
    display: flex;
    flex-direction: column;
    list-style: none;
    box-shadow: rgba(50, 50, 93, 0.23) 0px 50px 100px -20px;
    top: 10%;
    transition: all 0.5s ease-in-out;
    width: 100%;
    background-color: white;
    padding-bottom: 50px;
    z-index: 10;
  }
  ul li {
    padding: 52px;
    width: 100%;
    transition: all 0.5s ease-in-out;
    text-align: center;
    color: var(--secondary-dark-color);
  }
  .mobile-menu-icon {
    position: absolute;
    display: block;
    /* justify-content: center; */
    right: 20px;
  }
  .hero h1 {
    font-size: 50px;
  }
  .basket {
    position: relative;
    display: block;
    top: 70%;
    transition: all 0.5s ease-in-out;
    width: 50px;
    margin-left: 320px;
  }

  .num-items {
    right: -20px;
  }
}

@media (max-width: 700px) {
  .basket {
    margin-left: 290px;
  }
  .num-items {
    right: -20px;
  }
}
@media (max-width: 570px) {
  .basket {
    margin-left: 100px;
  }
  .num-items {
    right: -20px;
  }
}

And here JS code:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import { AiOutlineUser } from "react-icons/ai";
import { BsFillCartFill } from "react-icons/bs";
import { FaBars } from "react-icons/fa";
import { ImCross } from "react-icons/im";
import "./styles/Navbar.css";

function Navbar() {
  const [mobile, setMobile] = useState(false);

  const state = useSelector((state) => state.basketReducer);

  return (
    <>
      <nav className="navbar">
        <h3 className="logo">Logo</h3>
        <ul
          id="nav-links-mobiles"
          className={mobile ? "nav-links-mobile" : "nav-links"}
          onClick={() => setMobile(false)}
        >
          <Link to="/" className="home">
            <li>Home</li>
          </Link>
          <Link to="/products" className="about">
            <li>All Clothing</li>
          </Link>
          <Link to="/signup" className="signup">
            <li>Sign Up</li>
          </Link>
          <div className="basket">
            <Link to="/basket">
              <BsFillCartFill id="basket" />
              <div className="num-items ">{state.length} </div>
            </Link>
          </div>
        </ul>
        <button className="mobile-menu-icon" onClick={() => setMobile(!mobile)}>
          {mobile ? <ImCross /> : <FaBars />}
        </button>
      </nav>
    </>
  );
}

export default Navbar;

I tried to write media queries for different sizes of screen but it is just 10px less and basket again in wrong position. Maybe

CodePudding user response：

Just add this CSS code to keep it centered on mobile devices.

.basket {
  position: relative;
  display: table;
  top: 70%;
  transition: all 0.5s ease-in-out;
  width: 50px;
  margin:0 auto;
}