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?

Add comment

Tomek Makowski staff answered 5 years ago

1 0 Best answer

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

Add comment

fredemagi pro answered 5 years ago

0 0 Best answer

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 20 characters.

<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>

Add comment

Tomek Makowski staff answered 5 years ago

0 0 Best answer