Topic: Navbar hamburger open by default on mobile
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 6 years ago                                        
You just have to add class .collapse to div#navbarSupportedContent
best, Tomek
fredemagi pro commented 6 years ago
Right. Forgot all about that. Thanks ^_^.
Tomek Makowski staff commented 6 years ago
you are welcome
best
                                                    
                                                    Tomek Makowski
                                             staff                                             answered 6 years ago                                        
                                                    
                                                    fredemagi
                                             pro                                             answered 6 years 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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.5
- Device: iPhone 7
- Browser: Safari
- OS: iOS
- Provided sample code: No
- Provided link: No