Navbar hamburger open by default on mobile


Topic: Navbar hamburger open by default on mobile

fredemagi pro asked a year ago

Expected behavior When loading the page, the mobile menu should not be shown.

Actual behavior When the page loads, the mobile menu is showing by default which it not should.

How do I solve this?


Tomek Makowski staff answered a year ago

You just have to add class .collapse to div#navbarSupportedContent

best, Tomek


fredemagi pro commented a year ago

Right. Forgot all about that. Thanks ^_^.


Tomek Makowski staff commented a year ago

you are welcome

best


Tomek Makowski staff answered a year ago

could you show me your code in snippet project please ?

best, tomek


fredemagi pro answered a year ago

<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-light white" id="top-nav">
      <a class="navbar-brand ml-md-5" href="URL">
      <img alt="Logo" style="width: 200px;" src="URL">
      </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
 <div class="navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
        <li class="nav-item mr-3">
            <a class="nav-link" href="URL">Forside</a>
        </li>

        <li class="nav-item mr-3 dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="true">Ydelser
            </a>
            <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">

                @if(!$services->isEmpty())

                    @foreach($services as $service)

                        <a class="dropdown-item" href="URL">{{ $service->name }}</a>

                    @endforeach

                @endif

            </div>
        </li>
        <li class="nav-item mr-3">
            <a class="nav-link" href="URL">Referencer</a>
        </li>
        <li class="nav-item mr-5">
            <a class="nav-link" href="URL">Om os</a>
        </li>
    </ul>
  </div>
 </nav>

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.8.5
  • Device: iPhone 7
  • Browser: Safari
  • OS: iOS
  • Provided sample code: No
  • Provided link: No
Tags