CODEWITHSUNDEEP
cssbootstrap-4
Taras Yaremkiv
Taras Yaremkiv

Reputation: 3600

Bootstrap 4 navbar item jumps below and wraps

I'm trying to make a navbar with latest bootstrap4 (alpha6). enter image description here

<nav role="navigation" class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </li>
</ul>

What is the best way to make nav brand and items fit one line using bootstrap 4? Here's a link to Codeply

Upvotes: 3

Views: 1947

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362320

Read the docs for the navbar.

Use navbar-nav instead of nav and a navbar-toggleable-* class to keep the nav horizontal until a specific breakpoint when it will collapse vertically.

<nav role="navigation" class="navbar navbar-light bg-faded navbar-toggleable-md">
    <a class="navbar-brand" href="/">
        <img src="/public/img/logo.png" height="36" alt="myLogo">
         Food on Track
    </a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <svg>
            </svg>
        </li>
    </ul>
</nav>

Demo: https://www.codeply.com/go/iAGnRLMCE1

Update 2018

In Bootstrap 4.0.0 navbar-toggleable-* has been changed to navbar-expand-*

Upvotes: 1

Ashwin K Joseph
Ashwin K Joseph

Reputation: 391

Try this

<nav role="navigation" class="navbar navbar-light bg-faded">
<div class="row">
<div class="col-md-10">
<a class="navbar-brand" href="/">
   <img src="/public/img/logo.png" height="36" alt="myLogo">
   <span class="navbar-text">Food on Track</span>
</a>
</div>
<div class="col-md-2">
<ul class="ml-auto nav">
    <li class="nav-item">
        <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align: middle;">
            <g><path d="..."></path></g>
        </svg>
    </li>
</ul>
</div>
</div>
</nav>

Upvotes: 0

Related Questions