固定和中心导航栏

Question

我正在尝试制作一个显示宽度为 70% 的固定居中导航栏。当我将位置更改为固定时，它总是向左移动。

body {
  background-color: black;
}

.navbar,
main {
  width: 70%;
  margin: 0 auto;
}

.navbar {
  position: fixed;
  background: #1a1c1b;
  padding: 5px 0;
}

<header>
  <nav class="navbar">
    <div class="logo-box">
      <a href="index.html" class="logo">MOVIES</a>
    </div>

    <div class="search-box">
      <form action="https://www.google.com/search" method="get">
        <input id="seach-bar" name="q" type="search" placeholder="Search MOVIES" autocomplete="off">
        <button id="search-button" type="submit" class="search">Search</button>
      </form>
    </div>

    <div class="nav-links">
      <ul>
        <li><a href="#" class="links">Genres</a></li>
        <li><a href="#" class="links">Celebs</a></li>
        <li><a href="#" class="links">My List</a></li>
      </ul>
    </div>
  </nav>
</header>

Answer 1

     body {
      background-color: black;
     }

     .navbar{
       width: 70%;
       margin-left: 15%;
       margin-right: auto;
       position: fixed;
       background: #1a1c1b;
       padding: 5px 0;
      }

这应该对你有用，问题似乎是你将 70% 的宽度应用到了 body 和 nav，希望这对你有帮助。

Answer 2

您可以使用 left 和 transform 属性使导航栏居中，就像您在导航栏上使用 position: fixed; 一样。

/* some resets */

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  background-color: #e5e5e5;
}

.navbar,
main {
  width: 70%;
  margin: 0 auto;
}

.navbar {
  position: fixed;
  background: #1a1c1b;
  padding: 5px 0;
  /* centering your navbar */
  left: 50%;
  transform: translateX(-50%);
}

<header>
  <nav class="navbar">
    <div class="logo-box">
      <a href="index.html" class="logo">MOVIES</a>
    </div>

    <div class="search-box">
      <form action="https://www.google.com/search" method="get">
        <input id="seach-bar" name="q" type="search" placeholder="Search MOVIES" autocomplete="off">
        <button id="search-button" type="submit" class="search">Search</button>
      </form>
    </div>

    <div class="nav-links">
      <ul>
        <li><a href="#" class="links">Genres</a></li>
        <li><a href="#" class="links">Celebs</a></li>
        <li><a href="#" class="links">My List</a></li>
      </ul>
    </div>
  </nav>
</header>

第二种方法 ：您可以将导航栏包裹在容器中并应用 flexbox 或 grid.

我使用了 flexbox ，因为您已经将导航栏包裹在 header.

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  background-color: #e5e5e5;
}

header {
  position: relative;
  width: 100%;
  height: auto;
  /* centring your navbar */
  display: flex;
  justify-content: center;
}

.navbar,
main {
  width: 70%;
  margin: 0 auto;
}

.navbar {
  position: fixed;
  background: #1a1c1b;
  padding: 5px 0;
}

<header>
  <nav class="navbar">
    <div class="logo-box">
      <a href="index.html" class="logo">MOVIES</a>
    </div>

    <div class="search-box">
      <form action="https://www.google.com/search" method="get">
        <input id="seach-bar" name="q" type="search" placeholder="Search MOVIES" autocomplete="off">
        <button id="search-button" type="submit" class="search">Search</button>
      </form>
    </div>

    <div class="nav-links">
      <ul>
        <li><a href="#" class="links">Genres</a></li>
        <li><a href="#" class="links">Celebs</a></li>
        <li><a href="#" class="links">My List</a></li>
      </ul>
    </div>
  </nav>
</header>

你问的固定

document.querySelector('header').style.height = document.querySelector('.navbar').getBoundingClientRect().height + 'px';

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  background-color: #e5e5e5;
}

header {
  position: relative;
  width: 100%;
  /* centring your navbar */
  display: flex;
  justify-content: center;
  /* set it black */
  background-color: #1a1c1b;
}

.navbar {
  width: 70%;
  position: fixed;
  background: transparent;
  padding: 5px 0;
}

<header>
  <nav class="navbar">
    <div class="logo-box">
      <a href="index.html" class="logo">MOVIES</a>
    </div>

    <div class="search-box">
      <form action="https://www.google.com/search" method="get">
        <input id="seach-bar" name="q" type="search" placeholder="Search MOVIES" autocomplete="off">
        <button id="search-button" type="submit" class="search">Search</button>
      </form>
    </div>

    <div class="nav-links">
      <ul>
        <li><a href="#" class="links">Genres</a></li>
        <li><a href="#" class="links">Celebs</a></li>
        <li><a href="#" class="links">My List</a></li>
      </ul>
    </div>
  </nav>
</header>

没有JavaScript更简单的方法！

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  font-size: 1rem;
  font-family: "Inter", sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  background-color: black;
  border-bottom: 1px solid #e5e5e5;
}

.navbar .container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1125px;
  margin-left: auto;
  padding-left: 2rem;
  margin-right: auto;
  padding-right: 2rem;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .container .logo {
  color: white;
  text-decoration: none;
}

.navbar .container .search,
.navbar .container form {
  display: flex;
}

.navbar .container .search input[type=search],
.navbar .container form input[type=search] {
  color: white;
  font-size: inherit;
  font-family: inherit;
  padding: 0.5rem 0.75rem;
  background-color: black;
  border: 1px solid #e5e5e5;
}

.navbar .container .search input[type=search]::-moz-placeholder,
.navbar .container form input[type=search]::-moz-placeholder {
  color: #e5e5e5;
}

.navbar .container .search input[type=search]:-ms-input-placeholder,
.navbar .container form input[type=search]:-ms-input-placeholder {
  color: #e5e5e5;
}

.navbar .container .search input[type=search]::placeholder,
.navbar .container form input[type=search]::placeholder {
  color: #e5e5e5;
}

.navbar .container .search button[type=submit],
.navbar .container form button[type=submit] {
  width: 37.2px;
  display: grid;
  cursor: pointer;
  min-width: 37.2px;
  margin-left: -1px;
  place-items: center;
  border: 1px solid #e5e5e5;
}

.navbar .container .search button[type=submit] svg,
.navbar .container form button[type=submit] svg {
  width: 20px;
  height: 20px;
}

.navbar .container .navbar-nav {
  display: flex;
  list-style: none;
}

.navbar .container .navbar-nav .nav-item:nth-child(2) {
  margin: 0 3rem;
}

.navbar .container .navbar-nav .nav-link {
  color: white;
  text-decoration: none;
}

.navbar .container .navbar-nav .nav-link:hover {
  text-decoration: underline;
}

<nav class="navbar">
  <div class="container">
    <a href="#" class="logo">Movies</a>

    <div class="search">
      <form action="#">
        <input type="search" placeholder="Search" required />
        <button type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path>
                    </svg>
                </button>
      </form>
    </div>

    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Genres</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Celebs</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">My List</a>
      </li>
    </ul>
  </div>
</nav>

Answer 3

使用 flexbox！

将页眉设为 flexbox，justify-content 属性 居中对齐 上的导航栏横轴.

header {
  display: flex;
  justify-content: center;
}

Answer 4

尝试创建一个 class，例如“header”并为其分配以下属性：

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: #1a1c1b;

然后放置导航栏。

    <header class="header">
        <nav class="navbar">
        </nav>
    </header>

固定和中心导航栏

fixed and center navigation bar

html

css

navbar

使用 flexbox！