CODEWITHSUNDEEP
htmlcssbootstrap-4
prithee
prithee

Reputation: 37

Forcing a single horizontal Nav in Bootstrap 4

I am attempting to have a horizontal navbar, containing three equally sized nav-pills.

When I drop down to a smaller screen resolution (iphone 5) the third item always drops to a new line, and grows to full width.

How do I achieve a single line horizontal layout for all reasonable resolutions?

It does work when I set the py-1 class to py-0 but I like the look of extra padding.

    <div class="container-fluid">
        <section class="container py-1">
            <div class="row">
                <div class="col-md-12 align-content-center">
                    <ul class="nav nav-pills nav-fill navtop">
                        <li class="nav-item px-1 ">
                            <a class="nav-link active " href="https://example.com/home">Home</a>
                        </li>
                        <li class="nav-item px-1 ">
                            <a class="nav-link active " href="https://example.com/meetings">Meetings</a>
                        </li>
                        <li class="nav-item px-1 ">
                            <a class="nav-link active " href="https://example.com/courses">Courses</a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>

Upvotes: 0

Views: 134

Answers (1)

blurfus
blurfus

Reputation: 14031

It seems you have a number of extra containers (which you don't need) -

I removed the containers and added extra CSS for the padding (you can remove it/adjust it if you wish)

Updated

I also reduced the container's left/right padding (from 15px to 5px) to make room for the pills in iPhone 5/SE resolutions as per OP's comment - see image below

enter image description here

See demo below

/* this gives you extra padding on the right-left of each menu item */

.nav-pills li.nav-item {
  padding: 0 2px;
}

.container-fluid {
  padding-right: 5px !important;
  padding-left: 5px !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <ul class="nav nav-pills nav-fill navtop">
    <li class="nav-item">
      <a class="nav-link active" href="https://example.com/home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="https://example.com/meetings">Meetings</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="https://example.com/courses">Courses</a>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions