1

este es mi problema: Tengo un navbar y al agregarle varios items, el contenido se desborda del navbar y termina generando un espacio en blanco para agregar el contenido que queda fuera del navbar, adjunto imagen del problema para mayor entendimiento: introducir la descripción de la imagen aquí

Adjunto código del navbar:

<div class="col-lg-12">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary text-white" style="border-radius: 5px;">
        <a class="navbar-brand d-md-block d-lg-none">Categorías</a>
        <button class="navbar-toggler active border-0" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="fa fa-bars fa-lg text-white"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav text-left">
                @if (isset($categories) && $categories ?? '')
                @if($categories->count() <= 0) <!-- Si no existen categorias, se agregan categorias automaticas para no dejarlas en blanco -->
                    @if(isset($n_categories) && $n_categories ?? '')
                    @foreach ($n_categories as $categorietest)
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{$categorietest->categorie}}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item font-weight-bold" href="/?search={{$categorietest->categorie}}">Ver todos</a>
                            <div class="dropdown-divider"></div>
                            <a aria-label="Submenu" class="dropdown-item font-italic" href="/?search={{$categorietest->subcategorie}}">{{$categorietest->subcategorie}}</a>
                        </div>
                        @endforeach
                        @endif
                    </li>
                    @else
                    @foreach ($categories as $categorie)
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{$categorie->name}}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item font-weight-bold" href="/?search={{$categorie->name}}">Ver todos</a>
                            <div class="dropdown-divider"></div>
                            @if ($categorie->subcategories ?? '' && $categorie->subcategories->count() < 0) @foreach ($categorie->subcategories as $subcategorie)
                                <a aria-label="Submenu" class="dropdown-item font-italic" href="/?search={{$subcategorie->name}}">{{$subcategorie->name}}</a>
                                @endforeach
                                @endif
                        </div>
                    </li>
                    @endforeach
                    @endif
                    @endif
            </ul>
        </div>
    </nav>
</div>

1 respuesta 1

0

Es suficiente con añadir al nav-bar una clase min-vw-100 la cual especifica que no quieres que el nav llegue a tener un ancho inferior al 100% de la pantalla como podrás ver en este ejemplo:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary min-vw-100">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 1
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 2
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 3
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 4
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 5
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 6
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 7
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 8
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 9
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 10
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 11
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 12
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 13
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>

                <li class="nav-item dropdown no-arrow">
                    <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenú 14
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
                        <div class="dropdown-divider"></div>
                        <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
                    </div>
                </li>
            </ul>
        </div><!--//navbar-collapse-->
    </div><!--//container fluid-->
</nav>

Pero si son muchos los submenús que tienes te recomiendo usar un navbar-collapse vertical para que la navegación por ellos sea más comoda, aquí te dejo un ejemplo:

<div class="collapse bg-primary" id="navbarToggleExternalContent">
    <div class="nav-item dropdown no-arrow p-2">
        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Submenú 1
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
            <div class="dropdown-divider"></div>
            <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
        </div>
    </div>
    <div class="nav-item dropdown no-arrow p-2">
        <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Submenú 2
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item font-weight-bold" href="#">Ver todos</a>
            <div class="dropdown-divider"></div>
            <a aria-label="Submenu" class="dropdown-item font-italic" href="#">_</a>
        </div>
    </div>
</div>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
</div>
</nav>

<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
1
  • Muchas gracias!
    – David
    Commented el 15 dic. 2020 a las 21:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.