Home Bootstrap 5 Navbar Customization Issue: Items Displaying Vertically Instead of Horizontally

Questions

Bootstrap 5 Navbar Customization Issue: Items Displaying Vertically Instead of Horizontally

February 24, 2024

I’m attempting to customize a Bootstrap 5 navbar to display three items – a user avatar, a notifications panel, and menu icon – in a horizontal layout. However, despite my efforts, the items are appearing vertically stacked instead. I’ve provided the code snippet below:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />


<style>
    .nav-item{
        display: inline-block;
    }
</style>


<nav class="navbar navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <h4>North</h4>
            </a>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a href="{% url 'Profile' %}">Avatar</a>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="{% url 'Notifications' %}" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
                        <span class="material-symbols-outlined">
                            notifications
                        </span>
                    </a>
                    <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasTopLabel">Notifications</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                       <div class="offcanvas-body">
                        <div class="notification">
                            <a href="{{ notification.link }}">message</a>
                        </div>
                    </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="">
                        <span class="material-symbols-outlined">
                            menu
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

I’ve tried to ensure that the navbar-nav class is correctly applied and that the list items (nav-item) are set to display: inline-block, but the items still stack vertically. How can I achieve the desired horizontal alignment for these items within the navbar? Any insights or suggestions would be greatly appreciated!

>Solution :

You can add flex-row to the ul element’s class to align them horizontally. It adds the flex-direction: row CSS property to the component and all the sub-elements will be aligned horizontally:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />


<style>
    .nav-item{
        display: inline-block;
    }
</style>


<nav class="navbar navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <h4>North</h4>
            </a>
            <ul class="navbar-nav ms-auto flex-row">
                <li class="nav-item">
                    <a href="{% url 'Profile' %}">Avatar</a>
                </li>
                <li class="nav-item">
                    <a style="text-decoration: none;" href="{% url 'Notifications' %}" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
                        <span class="material-symbols-outlined">
                            notifications
                        </span>
                    </a>
                    <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasTopLabel">Notifications</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                       <div class="offcanvas-body">
                        <div class="notification">
                            <a href="{{ notification.link }}">message</a>
                        </div>
                    </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="">
                        <span class="material-symbols-outlined">
                            menu
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

Hope, it’s clear and helpful