如何设置导航栏徽标和导航栏标题的样式，使其不重叠？答案

【问题标题】：How to style navbar logo and navbar title so they don't overlap?如何设置导航栏徽标和导航栏标题的样式，使其不重叠？
【发布时间】：2022-01-08 07:05:27
【问题描述】：

我正在尝试制作一个类似于此网站的导航栏：https://med.stanford.edu/ultrasound.html。

到目前为止，我已经完成了自己的样式，但我坚持的一件事是，当我缩短浏览器的宽度时，标题会与我的徽标重叠。我不要那个。我想将导航栏标题始终保留在徽标旁边，就像我提供的网站一样。如何做到这一点？我的导航栏组件

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;

我的导航栏 CSS 文件

.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;
}

【问题讨论】：

标签： html css reactjs

【解决方案1】：

我认为这种风格不需要position: relative。

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

它应该适用于您的情况。只需评论这一行并检查。

【讨论】：

不，这似乎不起作用。标题仍然重叠

【解决方案2】：

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

使用引导导航栏。澄清你的问题。找不到您的图像文件，例如我们的徽标

【讨论】：