0

I have looked through several different threads and examples, and everything I've tried has made my menu's formatting go pretty wonky. Any tips on how to successfully get a multi-level drop down menu working would be appreciated.

Basically I want "National" to drop down (as it currently does), and then I want a submenu "Congress" to expand out to the right and show "House" and "Senate".

Here's my html:

<div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
        @guest
        @else
        <li class="nav-item">
            <a class="nav-link" href="{{ route('home') }}">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="state">{{ Auth::user()->state->name }} <span class="caret"></span></a>
            <ul class="dropdown-menu" aria-labelledby="state">
                <a class="dropdown-item" href="{{ url("states/" . Auth::user()->state->abbreviation) }}">Statehouse</a>
                <a class="dropdown-item" href="{{ url("/states/" . Auth::user()->state->abbreviation . "/primaries") }}">Primaries</a>
                <a class="dropdown-item" href="{{ url("states/" . Auth::user()->state->abbreviation . "/elections") }}">Elections</a>
            </ul>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="usa">National<span class="caret"></span></a>
            <ul class="dropdown-menu" aria-labelledby="state">
                <a class="dropdown-item" href="{{ route('overview') }}">Overview</a>
                <a class="dropdown-item" href="{{ route('house') }}">House</a>
                <a class="dropdown-item" href="{{ route('senate') }}">Senate</a>
                <a class="dropdown-item" href="{{ route('states') }}">States</a>
                <a class="dropdown-item" href="{{ route('parties') }}">Parties</a>
            </ul>
        </li>
        @if(!is_null(Auth::user()->party_id))
            <li class="nav-item">
                <a class="nav-link" href="{{ url("parties/" . Auth::user()->party_id) }}">Party</a>
            </li>
        @endif
        @endguest
    </ul>
</div>
user3253002
  • 1,521
  • 3
  • 21
  • 43
smritz
  • 108
  • 6
  • Have you seen these examples? https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation – user3253002 Sep 07 '18 at 22:01

1 Answers1

-1

Try looking at the link below. Scroll to the last example on the page for a dropdown menu. https://www.w3schools.com/Css/css_navbar.asp

Hope this helps!

basicunicorn
  • 1
  • 1
  • This question is about the CSS framework Bootstrap (https://getbootstrap.com/). While the content from the link may be helpful, it doesn't apply to this question due to the custom CSS in the Bootstrap framework. Also, avoid posting link-only answers; if the url changes, this answer becomes invalid. – Tim Lewis Sep 07 '18 at 16:56
  • the link is not describing a multi level menu. – sgotre Dec 10 '18 at 18:43