Html Question posted in
Some basic documentation can be found here.

Html – CSS: In a navbar how can I extend the dropdown menu horizontally across the width of the page container?

Currently, when I hover over an item in the navbar, a horizontal drop-down menu opens like this (note the width of the drop-down menu):
enter image description here

What would i like to achieve?

I would like to widen the dropdown menu horizontally like in the next photo, but only desktop version. I would like the dropdown menu to be as wide as the container (the one that Bootstrap already uses with the container class) that I am already using in my navbar and that I will also use throughout the body of the site.

In the photo (photomontage/collage) i am inspecting the navbar with Chrome so as to highlight the navbar container to give you an idea of ​​how wide I would like the dropdown menu to be.
enter image description here

Can you help me and show me how to get it? I have tried several attempts, but I failed.

style.css:

* {
    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;
    }
}

index.html:

<!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/[email protected]/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>

script.js:

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";
        });
    });
});

Thank you

Tags:

2

Answers


  1. 0

    YOu can modify the CSS position of the main menu item to ‘static’, so the absolute position of the submenu it will be related to the main nav container (full width). Then you can set the absolute position of the submenu I’ve added these lines to make it work that way (only for the first menu). This rule will affect only desktop screen width (>786px)

    @media (min-width: 769px) {
  .navbar-nav > .nav-item:first-child{
    position: static;
  }

  .navbar-nav > .nav-item:first-child > div.dropdown-menu {
    margin-top: -1px;
    width: 100%; 
  }
}

    You can remove :first-child and this rule will apply to the rest of the menus/submenus as well.

    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;
}

.navbar-nav > .nav-item:first-child{
  position: static;
}

.navbar-nav > .nav-item:first-child > div.dropdown-menu {
  margin-top: -1px;
  width: 100%;
}


/* 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/[email protected]/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>

    (Note: To see this embedded preview as intended you may need a desktop computer screen and click on Run Code Snippet, then ‘Full page’)

    Login or Signup to reply.
  2. 0

    Add the Bootstrap class position-relative to the container and position-static to the dropdown.

    Add the class w-100 to the dropdown-menu.

    Finally the vertical view for the mobile version:

    /* Responsive per dispositivi mobili */
@media (max-width: 768px) {
   .navbar-expand-md .navbar-nav .nav-link {
       padding-top: 20px;
       padding-bottom: 20px;
   }

   .dropdown-menu-horizontal {
       flex-direction: column;
   }
}

    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;
    }
    
    .dropdown-menu-horizontal {
        flex-direction: column;
    }
}
    <!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 position-relative">
            <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 position-static">
                        <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
                        <div class="dropdown-menu dropdown-menu-horizontal w-100" 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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search