CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4navbarnavhorizontal-scrolling
user6780526
user6780526

Reputation:

Horizontal navbar scroll on smaller devices

I'm using bootstrap 4. I created a second navigation bar using

<div class="nav-active-border b-danger bottom">
    <ul class="nav nav-active-border b-warning flex-row">
       <li class="nav-item">Link 1</li>
       <li class="nav-item">Link 2</li>
       <li class="nav-item">Link 3</li>
       <li class="nav-item">Link 4</li>
       <li class="nav-item">Link 5</li>
       <li class="nav-item">Link 6</li>
       <li class="nav-item">Link 7</li>
       <li class="nav-item">Link 8</li>
       <li class="nav-item">Link 9</li>
    </ul>
</div>

This however, on mobiles shows in two rows are there are multiple items. How to create a horizontal scroll for these nav items on mobile with indicators just for mobile layouts. It shows perfect on desktops and laptops

I'm trying to achieve the same like on google https://www.google.co.in/intl/en/about/products/

Upvotes: 0

Views: 1153

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

I created something like this with Bootstrap 4 using the flexbox utility classes.

A little jQuery is used to toggle the justify-content-end class which aligns the nav items to the right side, instead of the left. You can toggle to slide the nav in either direction. CSS transition is used for sliding animation.

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

<div class="container">
    <div class="d-flex align-items-center">
        <div class="flex-shrink-0">
            <a href="#" class="btn-left btn-link toggle p-2"><i class="ion-chevron-left"></i></a>
        </div>
        <div class="flex-grow-1 w-100 o-hidden">
            <ul class="nav nav-fill text-uppercase position-relative flex-nowrap">
                <li class="nav-item">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Self</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">World</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Lifestyle</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Bio</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Politics</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Local</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Science</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Tech</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Health</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Food</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Design</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Culture</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Travel</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">More</a>
                </li>
            </ul>
        </div>
        <div class="flex-shrink-0">
            <a href="#" class="btn-right btn-link toggle p-2"><i class="ion-chevron-right"></i></a>
        </div>
    </div>
</div>

jQuery

$('.toggle').click(function(){
    $('.nav').toggleClass("justify-content-end");
});

CSS

.o-hidden {
    overflow:hidden;
}

.nav {
    transition: transform 0.4s;
    transform: translateX(50%);
    left: -50%;
}

.nav.justify-content-end {
    transform: translateX(0);
    left: 0;
}

Upvotes: 1

Related Questions