Does anybody know how to create a dropdown menu that covers the whole website

Like the one on squarespace website

This is generally known as a mega menu, there are lots of these plugins available that offer different features, here's one I use regularly:

https://www.will-myers.com/articles/building-a-mega-menu-in-squarespace-71-free

Here's a very feature-heavy example:

https://www.squarestylist.com/shop/p/mega-menu

So, you want a dropdown menu that takes over the whole website, right? To make one like that, you might need to mess with the website's code a bit. You'll want to work with HTML, CSS, and maybe a dash of JavaScript. If you're not super familiar with coding, finding a tutorial or asking me here (highlight my nickname).

4 hours ago, JoanGarroway said:

So, you want a dropdown menu that takes over the whole website, right? To make one like that, you might need to mess with the website's code a bit. You'll want to work with HTML, CSS, and maybe a dash of JavaScript. If you're not super familiar with coding, finding a tutorial or asking me here (highlight my nickname).

Yeah send it

14 hours ago, Yftweb said:

Yeah send it

okay ~~

i think creating the dropdown menu involves a combo of html, css, and a dash of javascript

you'll need a basic html structure for your dropdown menu

<nav class="dropdown-menu">
    <button class="dropdown-btn">Menu</button>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</nav>

now, let's style that menu using css

this is where you'll make it look nice and cover the whole website

body {
    font-family: Arial, sans-serif;
}

.dropdown-menu {
    position: fixed; /* This will make it cover the whole website */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333; /* Customize the background color */
}

.dropdown-btn {
    background-color: #333;
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
}

.dropdown-content {
    display: none; /* Hide the dropdown content by default */
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

and let's add some java to make the dropdown interactive

const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownContent = document.querySelector('.dropdown-content');

dropdownBtn.addEventListener('click', function() {
    if (dropdownContent.style.display === 'block') {
        dropdownContent.style.display = 'none';
    } else {
        dropdownContent.style.display = 'block';
    }
});

javascript code makes the dropdown menu appear and disappear when you click the menu button