Jak stworzyć nawigację na 100% width z maxymalną szerokością 800 px Bootstrap CSS

Question

Chciałem zrobic tak, żeby nawigacja była na całą szerokość np z czerwonym tłem (tło z Bootstrapa na całą szerokość), a content miał maksymalną szerokość 800 px, czyli żeby główne menu było wyśrodkowane i nie zajmowało całej szerokości, a jedynie max-width: 800 px.

Nie mam pojęcia od czego z tym zacząć. Próbowałem wsadzać divy między główną nawigację, ale nic nie działa. Offsety pomagają, ale nie pozwalają ustalić dokładnie szerokości. Proszę o pomoc w tej kwestii. Interesuje mnie stworzenie takiego menu z wykorzystaniem Bootstrapa i CSS.

Answer 1

Nawigacje z bootstrapa mozesz zmienic tak np na czerwono-zielona:

css

.my-nav {
    background-color: red;
}

.my-nav .navbar-brand,
.my-nav .navbar-text {
    color: green;
}

.my-nav .navbar-nav .nav-link {
    color: green;
}

.my-nav .nav-item.active .nav-link,
.my-nav .nav-item:hover .nav-link {
    color: lightgreen;
}

html

<nav class='navbar navbar-expand-lg my-nav'>

centrowanie:

css

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

html

<ul class='navbar-nav navbar-center'>

 

Answer 2

Może tak?

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

 

Answer 3

    <nav class="bg-danger">
        <div class="bootstrap-navbar">
            Tutaj wstaw navbar z bootstrap
        </div>
    </nav>

.bootstrap-navbar {
    margin: 0 auto;
    width: 800px
}