how to make navbar only on 75% of header-CodePudding

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 > </nav>

Do you guys have any ideas?

##edit

this is navbar for full size of page

<nav >
    <div >
        <img src="~/images/logo.png" width="65" height="55" />
        <button  type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div >
            <ul >
                <li >
                    <a  asp-area="" asp-page="/Index">Home</a>
                </li>
                <li >
                    <a  asp-area="" asp-page="/Privacy">Kursy</a>
                </li>
                 <li >
                    <a  asp-area="" asp-page="/Privacy">Pomoc</a>
                </li>
                <li >
                    <a  asp-area="" asp-page="/Privacy">Mój profil</a>
                </li>
            </ul>
            <form  role="search">
                <input  type="search" placeholder="Search" aria-label="Search">
                
            </form>

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

CodePudding user response：

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

.navbar-nav {
  width: 100%;
}

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

<nav >
  <div >
    <img id="logo" src="https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80">
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
      </ul>
      <form  role="search">
        <input  type="search" placeholder="Search" aria-label="Search">
        <button  type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>