I am trying to make a navbar which kind of looks like this site: https://med.stanford.edu/ultrasound.html.

So far I have done my own styling but one thing I am stuck at is that, when I shorten the width of the browser, the title overlaps my logo. I do not want that. I want to keep the navbar title beside the logo always like the site I provided. How to achieve that? My navbar component

import React from "react";
import NavbarItems from "./NavbarItems";
import "./navbar.css";
import logo from "../../logo/logo.png";

import { Image } from "@chakra-ui/image";
import { Text } from "@chakra-ui/react";
function Navbar(props) {
  return (
    <>
      <nav className='NavbarItems'>
        <div className='navbar-logo'>
          <a href='#'>
            <Image src={logo} alt='logo' />
          </a>
        </div>
        <div className='navbar-title'>
          <Text>Some text beside the logo</Text>
        </div>

        <div
          className='menu-icon'
          onClick={() => props.setIsMenuOpen(!props.isMenuOpen)}
        >
          <i className={props.isMenuOpen ? "fas fa-times" : "fas fa-bars"}></i>
        </div>
        <ul className={props.isMenuOpen ? "nav-menu active" : "nav-menu"}>
          {NavbarItems.map((item, index) => {
            return (
              <li key={index}>
                <a className={item.cname} href={item.url}>
                  {item.title}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

my navbar CSS file

.NavbarItems {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  position: -webkit-sticky;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  background: white;
}

.navbar-logo {
  position: relative;
  justify-self: start;
  margin-left: 8px;
  margin-right: 8px;
  cursor: pointer;
  width: 250px;
}

.navbar-title {
  position: relative;
  justify-self: start;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
  list-style: none;
  text-align: center;
  width: 70vw;
  justify-content: end;
  margin-right: 2rem;
}

CodePudding user response：

There is no need position: relative to this style my opinion.

.navbar-title {
//position: relative;
  justify-self: start;
}

It should work for you on your case. Just comment this line and check.

CodePudding user response：

<ul >
  ...
  <li role="presentation" >
    <a  data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span ></span>
    </a>
    <ul >
      ...
    </ul>
  </li>
  ...
</ul>

use bootstrap navbar. clarify your question. your image files such us logos do not found