Display Hamburger Menu in all devices with bootstrap

1

Hi there! I’m new to this. Right now the hamburger menu is only displaying on mobile devices and a drop down menu is available in desktop devices. I want the hamburger menu to display in all devices.

Here is my code:

<header id="header" class=" ">
        <div class="container main-menu">
            <div class="  align-items-center justify-content-between d-flex"> 
                    <div class="bar_logo" style="display: none; "><a href="index.php"> <img src="assets/images/new-logo-black.png" alt="" /></a></div>
                  <button type="button" id="mobile-nav-toggle"><i><svg width="20" height="20" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></i></button>
                  <nav id="nav-menu-container">
                    <div class="mobile_side_logo" style="display: none; " > 
                        <a href="index.php"> <img src="assets/images/new-logo-black.png" alt="" class="img-fluid"/></a>
                    </div>

Just let me know if you need any other info. Thanks!

2

Hey @GerryG, Can you link the project so we can check it out?

3

Are you saying that you never want the full menu to display, you always want just the hamburger menu to display? If so, can’t you just get rid of the full menu?

4

Hi. This is my website: weatherpr com

I would like that the menu looks the same in desktop as in mobile version.

image
image2100×1015 664 KB

5

Do you guys think is possible to do that?

6

Well, if you never want the horizontal menu to display, a simple solution would be to increase the max-width on the CSS break point so that it never shows, something ridiculous like 10000px.

7

Thanks. Where on the above code should I add that?

8

This is what I have in the bootstrap.css file:


.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
9

You’re going to have to figure that out for yourself :slight_smile: Basically, there are CSS break points that are hiding/showing the hamburger icon and hiding/showing the top horizontal menu. It shouldn’t be too hard for you to figure out where those are and increase the max-width value on them.