is it possible to show a special navbar on a certain device and another one on smaller using bootstrap?

Question

Hope you're all well. I'll be fast and precise. Right now, I've make a custom navbar (the picture is below). But of course, this navbar need to be desactivated when the screen is too small to have it and shown a normal navbar at the top. Is it possible to do it using bootstrap ?

Picture of my actual custom navbar (on the left) :

Cordially

Post the code you've attempted. Do you mean [something like this](https://stackoverflow.com/questions/48472771/bootstrap-4-responsive-sidebar-menu-to-top-navbar/48477019#48477019)? — Carol Skelly, Dec 28 '20 at 15:22
JP. Aulet anwsered to my question sir. Thank you anyway. But I still have a problem (you can find the code below). Cordially — Balaure, Dec 28 '20 at 15:32

JP. Aulet · Accepted Answer · 2020-12-28T16:21:25.693

1

You are looking for responsive layout: https://getbootstrap.com/docs/4.0/layout/overview/

In your case, this could show this sidebar on certain width (large devices) and hide it on others, like:

<div class='yourLargeNavbar'> ... </div>

<div class='yourSmallNavbar'> ... </div>

And then, with CSS:

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { 
    .yourLargeNavbar{
      display:none;
    }
    .yourSmallNavbar{
      display:block;
    }
}

@media (min-width: 767.98px) { 
        .yourLargeNavbar{
          display:block;
        }
        .yourSmallNavbar{
          display:none;
        }
    }

This way, when the screen size is less than 767px, the small navbar will appear and the large one disappear, and viceversa.

There are a lot of examples, and Bootstrap has their own navbar component that works with a responsive way: https://getbootstrap.com/docs/4.0/components/navbar/

Edit: Check the code now:

<div class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </div>

You should change the class: nav-toggler to navbar-toggle and delete the "bs" in some data-params and change the button to div. Replace the piece of code for the one I posted and it should work.

Here: https://codepen.io/jpaulet/pen/xxEprGB

edited Dec 28 '20 at 16:21

answered Dec 28 '20 at 14:27

JP. Aulet

4,375
4
26
39

Hello, its working. But the collapse is not working... https://codepen.io/ismaelzem/pen/ExgommQ – Balaure Dec 28 '20 at 15:27
I've tried the same bootstrap code but still still not working. I do have the 3 script as you can see in my codepen... – Balaure Dec 28 '20 at 16:14
I edited your codepen to make it work and edited the answer, please check it. – JP. Aulet Dec 28 '20 at 16:17
I think you need to create a new codepin and give me the link because the code in my codepen is still not working :/ – Balaure Dec 28 '20 at 16:19
Check it now! ;) – JP. Aulet Dec 28 '20 at 16:22
Its working, thank you ! What was the problem ? – Balaure Dec 28 '20 at 16:27

is it possible to show a special navbar on a certain device and another one on smaller using bootstrap?

1 Answers1