how to make navbar only on 75% of header

Question

Hello i am working on some project and i want to deploy navbar looks like this:

I have been working with many CSS scenarios and i cannot get to it. I was working with everything at bootstrap docs and found nothing.

Last idea which comes to my mind is to put this navbar as image and then images on it.

<nav class=""> </nav>

Do you guys have any ideas?

##edit

this is navbar for full size of page

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <img src="~/images/logo.png" width="65" height="55" />
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-end">
            <ul class="navbar-nav flex-grow-1 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Kursy</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Pomoc</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Mój profil</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                
            </form>

        </div>
    </div>
</nav>

Rok Benko · Accepted Answer · 2022-09-07T10:09:00.140

Here you go...

It's very easy. Set width: 75vw !important; to the collapse and apply the style you want.

See the snippet below.

#logo {
  width: 5%;
}

.collapse {
  width: 75vw !important;
  border: 1px solid red;
  border-radius: 40px;
  background-color: red;
}

.navbar-collapse {
  flex-grow: 0 !important;
}

.nav-item {
  padding: 0 16px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <img id="logo" src="https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse py-1 pe-3" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 w-100 d-flex justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Thanks, could you please tell me how to make these spaces between buttons? like in this example: https://imgur.com/a/n4pkw3x — Software Architect, Sep 07 '22 at 09:25
I updated my answer. Add `d-flex justify-content-between` and set `padding` to the links. — Rok Benko, Sep 07 '22 at 10:09
Hey man! Maybe you could help? https://stackoverflow.com/questions/73891924/cannot-add-step-5-to-be-in-same-line-as-other-steps-in-js-and-html-and-css — Software Architect, Sep 29 '22 at 07:54
Hi! Sorry for the late response. I see you have already found a solution. Otherwise, I would be happy to help. — Rok Benko, Sep 29 '22 at 11:48
Hello, maybe you would help me here: https://stackoverflow.com/questions/73895283/setting-background-color-to-white-makes-line-in-progress-bar-invisible some problem with css — Software Architect, Sep 29 '22 at 12:06

how to make navbar only on 75% of header

1 Answers1