如何让我的导航栏显示在页面顶部？

Question

这是我目前的导航栏。我不知道为什么它运行很长时间。我尝试调整 css 以使其保持在页面顶部，但似乎没有任何效果。我还尝试检查屏幕粉红色部分的元素，但我无法正确阅读它。我对 Web 开发还很陌生。非常感谢任何帮助，谢谢！

这是我的 app.js 文件：

import React, { Component } from 'react';
import Navbar from './Navbar'
import {BrowserRouter, Switch, Route} from "react-router-dom";
import './App.css';

import Home from '../pages/Home';
import Vault from '../pages/Vault';
import Footer from './Footer';

class App extends Component {

  render() {
    return (
    <BrowserRouter>
      <Navbar />
        <Switch>
          <Route exact path="/">
          <Home></Home>
          <Footer></Footer>
          </Route>
          <Route exact path="/vault">
            <Vault></Vault>
          </Route>
          <Route path="/governance">  
          </Route>
          <Route path="/whitepaper">
          </Route>
        </Switch>
    </BrowserRouter>
    );
  }
}

export default App;

这是我的 Navbar.js 文件：

import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import logo from '../components/logo.png'

const Navbar = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <nav className="navbar is-success" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
          <a
            role="button"
            className={`navbar-burger burger ${isOpen && "is-active"}`}
            aria-label="menu"
            aria-expanded="false"
            onClick={() => setOpen(!isOpen)}
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
          <div className={`navbar-menu ${isOpen && "is-active"}` }>
            <div className="navbar-start "  >
            <NavLink className="navbar-item" activeClassName="is-active" to="/">
              Home 
            </NavLink>
            <NavLink className="navbar-item" activeClassName="is-active" to="/vault">
              Vault  
            </NavLink>
            <NavLink className="navbar-item" activeClassName="is-active" to="/governance">
              Governance
            </NavLink>
            <NavLink className="navbar-item" activeClassName="is-active" to="/whitepaper">
              Whitepaper
            </NavLink>
            </div>
          <div className="navbar-end">
            <div className="navbar-item">
              <div className="buttons">
              </div>
            </div>
          </div>
        </div>
    </nav>
  );
};

export default Navbar;

Answer 1

没有原始 CSS 文件有点棘手，但以下内容应该适合您。

.navbar {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:48px;
    background:red /* for testing purposes */
}