Navigation should not have full width, but the width of the content

Question

I stand at the beginning.

I want to build a navigation similar to this:

This is my basic boostrap4 navigation html:

<nav class="navbar navbar-expand navbar-light bg-light">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Stammdaten <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Diagnose</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Erstbehandlung
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Verlauf</a>
      </li>
            <li class="nav-item">
        <a class="nav-link" href="#">Tumorkonferenzen</a>
      </li>
    </ul>
</nav>

The navbar should not collapse - I achieved this with navbar-expand

The navbar should have the width of the content - I don't know how.

The navbar should have a margin on the right side and I want to apply a similar style (rounded corners).

Thank you very much!

Do you have an example of how the whole thing looks and how it should look? Also, perhaps add the `nav` container element, that could help in this case. — Mihail Minkov, Mar 03 '21 at 17:46
The width of _what_ content? Please expand your question to add important detail. My guess is that you should just put it in the same type of container element as your content, but it's hard to say. — isherwood, Mar 03 '21 at 17:50

score 2 · Answer 1 · answered Mar 03 '21 at 17:52

2

Do this on navbar for width according to content:

{
  width: max-content;
}

and this to add rounded corners:

{
  border-radius: 12px; /* play around with this to get perfect */
}

answered Mar 03 '21 at 17:52

Unnat

398
2
12

Thank you very much. Unfortunately I have to respect IE10 and IE11 and is seems as they do not support `width: max-content`. Still a great answer. https://developer.mozilla.org/en-US/docs/Web/CSS/max-content – Phantom Mar 03 '21 at 20:58

score 1 · Answer 2 · answered Mar 03 '21 at 19:26

navbar by default is displayed as flex, i.e., display: flex;, which will display the flex container as block.

To make the navbar to only take up the content's width, you can just have it display as inline flex, i.e., display: inline-flex, similar to inline-block vs block.

You can manually style the navbar as inline flex, or use Bootstrap built-in class d-inline-flex:

<nav class="navbar navbar-expand navbar-light bg-light d-inline-flex">
    ...
</nav>

demo: https://jsfiddle.net/davidliang2008/71tbwvgr/4/

Thank you very much. I prefer this answer, because I have to support IE10 and IE11. `display: inline-flex` supported with the prefix ms- (https://caniuse.com/?search=display%3A%20flex) — Phantom, Mar 03 '21 at 21:01

score 0 · Answer 3 · answered Mar 03 '21 at 17:42

0

You have to add css to achieve this. As nav is block level element it takes full width.So change it to inline-block

.navbar{
  display: inline-block;
  border-radius: 20px;
}

answered Mar 03 '21 at 17:42

Sayog

720
6
8

Thank you very much. I prefer the other answers, because the don't break the flex. – Phantom Mar 03 '21 at 20:59

Navigation should not have full width, but the width of the content

3 Answers3