CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Imhoteb
Imhoteb

Reputation: 33

How to make animated toggle menu with effect only on mobile devices?

I am new here and forgive me if this question has already been asked before, but I couldn't find that kind of problem. And at the beginning, sorry for my grammar ;) .

The thing is, that I would like to get toggle menu that slides in from right side, after a click on the "hamburger" icon, but only when the width of the screen is smaller than 576 px. On larger screens, i have a fixed-top navbar, without any effects and that's fine. I am using Bootstrap 4 to build my site. Is it possible to do? 

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand pl-md-4" href="index.html">Logo</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 4</a>
                </li>
            </ul>
            <ul class="navbar-nav pr-md-4">
                <li class="nav-item px-md-3">
                    <a class="nav-link" href="#">link 5</a>
                </li>
                <li class="nav-item px-md-3">
                    <a class="nav-link" href="#">link 6</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">link 7</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 2

Views: 252

Answers (1)

Krishnamoorthy Acharya
Krishnamoorthy Acharya

Reputation: 4254

Best way to do it is create two different navs one for the Bigger screens and one more for smaller screens.And give different functionality based on the ID through JS

<!-- Hide the for large Screen -->
  <nav id="jsIdentifer1" class="hidden-md hidden-lg">
   your navigation code 
  </nav>
<!-- Hide the for small Screen -->
  <nav id="jsIdentifer2" class="hidden-sm hidden-xs">
    your navigation code 
  </nav>

Upvotes: 1

Related Questions