NAVX

Tutorial and guides

Long dropdowns

Dropdowns with a large height

Sometimes it is necessary to use dropdowns with many items. In these cases the dropdowns have a large height and this can cause problems in certain screen sizes. See below how to limit the dropdown height.

1 - Follow the documentation and set up a navigation bar with a simple menu:

Copy 
<nav id="navigation" class="navigation">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

2 - Add a dropdown with a lot of items:

Copy 
<nav id="navigation" class="navigation">
    <div class="navigation-header">
        <div class="navigation-brand-text">
            <a href="#">NAVIGATION</a>
        </div>
        <div class="navigation-button-toggler">
            <i class="hamburger-icon"></i>
        </div>
    </div>
    <div class="navigation-body">
        <div class="navigation-body-header">
            <div class="navigation-brand-text">
                <a href="#">NAVIGATION</a>
            </div>
            <span class="navigation-body-close-button">&#10005;</span>
        </div>
        <ul class="navigation-menu">
            <li class="navigation-item is-active">
                <a class="navigation-link" href="#">Home</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Services</a>
                <ul class="navigation-dropdown">
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                    <li class="navigation-dropdown-item">
                        <a class="navigation-dropdown-link" href="#">Dropdown item</a>
                    </li>
                </ul>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Blog</a>
            </li>
            <li class="navigation-item">
                <a class="navigation-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

This is not a problem in mobile devices. So we'll define the CSS code to work only in large devices:

Copy 
@media (min-width: 992px){
    .navigation-dropdown{
        max-height: 300px !important;
        overflow-y: auto !important;
    }
}

You need to modify the "min-width" value above if you have modified the breakpoint value.

The result:

You can modify the value of the "max-height" property to the value that you want. See the list of tutorials for other ways to modify the navigation bar and add features.