Navbar hamburger open by default on mobile


Topic: Navbar hamburger open by default on mobile

fredemagi pro asked 5 years 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 5 years ago

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

best, Tomek


fredemagi pro commented 5 years ago

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


Tomek Makowski staff commented 5 years ago

you are welcome

best


Tomek Makowski staff answered 5 years ago

could you show me your code in snippet project please ?

best, tomek


fredemagi pro answered 5 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>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags