javascripthtmlcssflexboxbootstrap-5

CSS: Problem in the navbar, due to the position of the text selection rectangle and the drop-down menu


I'm creating a navbar but I have a problem when I move the mouse over an item (for example on Company) to display the drop-down menu below.

enter image description here

The problem is that the green selection rectangle is positioned too close to "Company" (almost as if to underline it), instead I would like to position the green rectangle much lower and precisely on the lower edge of the navbar. Consequently I would also like to improve the drop-down menu because it seems to be positioned too much above and overlapping the navbar. The result I would like to obtain is this:

enter image description here

I think the problem is related to:

or maybe the problem is something else, i don't know, i can't solve it.

document.addEventListener("DOMContentLoaded", function () {
    const dropdowns = document.querySelectorAll(".nav-item.dropdown");

    dropdowns.forEach(dropdown => {
        dropdown.addEventListener("mouseenter", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "flex";
        });

        dropdown.addEventListener("mouseleave", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "none";
        });
    });
});
* {
    box-sizing: border-box;
}



/* Navbar */
.navbar {
    background-color: #000033;
    padding: 0px 0; /* Imposta il padding verticale invece dell'altezza */
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
}

/* Stile logo e testo del brand */
.logo {
    height: 80px;
    margin-right: 10px;
}

.brand-text {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1;
}

.fondazione {
    font-size: 0.80em;
    font-weight: normal;
    letter-spacing: 0.28em;
}

.surname {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
    color: #ffffff;
    margin-right: 10px;
    padding: 0 10px; /* Gestisce lo spazio tra i link */
    line-height: normal; /* Usa la line-height di default */
    position: relative;
}

.navbar-nav .nav-link:hover::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px; /* Altezza del rettangolo */
    background-color: #459439;
    position: absolute;
    bottom: 0; /* Allineato al bordo inferiore */
    left: 0;
    z-index: 1000;
}

/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
    display: none;
}

/* Dropdown orizzontale */
.dropdown-menu-horizontal {
    display: none;
    background-color: #000033 !important;
    padding: 20px !important;
    min-width: 100%;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
}

.dropdown-item-horizontal {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 30px;
    white-space: nowrap;
}

.dropdown-item-horizontal img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.dropdown-item-horizontal:hover {
    color: #d4d4ff;
    text-decoration: none;
}

/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
    display: flex;
    justify-content: space-around;
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>


<!-- Navbar con logo e link -->
<nav class="navbar navbar-expand-md navbar-dark mb-0">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="#">
            <img src="img/..." alt="Logo" class="logo">
            <div class="brand-text">
                <span class="fondazione">AAAAAAA</span>
                <span class="surname">XXXX</span>
            </div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
                    <div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Thank you


Solution

  • The idea is to use the total height for the nav links on the right. Here are the steps to do it:

    1. Add align-items-stretch class to the container to stretch the items of the container vertically to utilize the full height for the nav links
    2. Add h-100 class to the ul element so that it gets 100% height of it's parent
    3. Set the 100% height to the nav-link as well and then align vertically using Flexbox
    .navbar-nav .nav-link {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    1. Add align-self-center class to the navbar-toggler button so that it doesn't stretch vertically like other items

    2. Dropdown positioning:

    .dropdown-menu-horizontal {
        top: 97% !important;
    }
    
    1. Overriding the padding for Navbar: (In some places it is showing some padding. I don't know why)
    .navbar {
        padding: 0 !important;
    }
    

    document.addEventListener("DOMContentLoaded", function () {
    const dropdowns = document.querySelectorAll(".nav-item.dropdown");
    
    dropdowns.forEach(dropdown => {
        dropdown.addEventListener("mouseenter", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "flex";
        });
    
        dropdown.addEventListener("mouseleave", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "none";
        });
    });
    });
    * {
        box-sizing: border-box;
    }
    
    
    
    /* Navbar */
    .navbar {
        background-color: #000033;
        padding: 0 !important; /* Imposta il padding verticale invece dell'altezza */
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1000;
        box-sizing: border-box;
    }
    
    /* Stile logo e testo del brand */
    .logo {
        height: 80px;
        margin-right: 10px;
    }
    
    .brand-text {
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        line-height: 1;
    }
    
    .fondazione {
        font-size: 0.80em;
        font-weight: normal;
        letter-spacing: 0.28em;
    }
    
    .surname {
        font-size: 2.4rem;
        font-weight: bold;
        letter-spacing: 0.05em;
    }
    
    /* Rettangolino colorato sotto le voci della navbar */
    .navbar-nav .nav-link {
        color: #ffffff;
        margin-right: 10px;
        padding: 0 10px; /* Gestisce lo spazio tra i link */
        line-height: normal; /* Usa la line-height di default */
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .navbar-nav .nav-link:hover::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px; /* Altezza del rettangolo */
        background-color: #459439;
        position: absolute;
        bottom: 0; /* Allineato al bordo inferiore */
        left: 0;
        z-index: 1000;
    }
    
    /* Rimozione della freccia dropdown */
    .nav-link.dropdown-toggle::after {
        display: none;
    }
    
    /* Dropdown orizzontale */
    .dropdown-menu-horizontal {
        display: none;
        background-color: #000033 !important;
        padding: 20px !important;
        min-width: 100%;
        border-radius: 0;
        position: absolute;
        left: 0;
        top: 97% !important;
        z-index: 9999;
    }
    
    .dropdown-item-horizontal {
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        margin-right: 30px;
        white-space: nowrap;
    }
    
    .dropdown-item-horizontal img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }
    
    .dropdown-item-horizontal:hover {
        color: #d4d4ff;
        text-decoration: none;
    }
    
    /* Mostra il menu a tendina al passaggio del mouse */
    .nav-item:hover .dropdown-menu-horizontal {
        display: flex;
        justify-content: space-around;
    }
    
    /* Responsive per dispositivi mobili */
    @media (max-width: 768px) {
        .navbar-expand-md .navbar-nav .nav-link {
            padding-top: 20px;
            padding-bottom: 20px;
        }
    }
    <!DOCTYPE html>
    <html lang="it">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Example</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    
    
    <!-- Navbar con logo e link -->
    <nav class="navbar navbar-expand-md navbar-dark mb-0">
        <div class="container align-items-stretch">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="img/..." alt="Logo" class="logo">
                <div class="brand-text">
                    <span class="fondazione">AAAAAAA</span>
                    <span class="surname">XXXX</span>
                </div>
            </a>
            <button class="navbar-toggler align-self-center" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto h-100">
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
                        <div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
                            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
                            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
                            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
                </ul>
            </div>
        </div>
    </nav>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
    </body>
    </html>