MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

#hamburger-menu {
    display: none;
}

@media (max-width: 768px) {
    #hamburger-menu {
        display: inline-block;
    }
    .vector-main-menu {
        display: none;
        background-color: #007BFF; /* Customize background color */
        position: absolute;
        top: 40px; /* Adjust to fit your design */
        left: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 100;
    }
    .vector-main-menu li {
        text-align: center;
        padding: 10px;
        border-top: 1px solid #fff;
    }
    .vector-main-menu li a {
        color: white; /* Menu link color */
        text-decoration: none;
        font-size: 18px;
    }
}

/* Make sure the hamburger menu only shows on mobile */
#hamburger-menu {
    display: none;
}

@media (max-width: 768px) {
    #hamburger-menu {
        display: inline-block; /* Display the button on mobile */
    }

    /* Initially hide the menu */
    .vector-main-menu {
        display: none;
        background-color: #007BFF; /* Background color of the menu */
        position: absolute;
        top: 50px; /* Adjust this if necessary */
        left: 0;
        width: 100%;
        padding: 10px 0;
        z-index: 100;
    }

    /* Style the menu items */
    .vector-main-menu li {
        text-align: center;
        padding: 10px;
        border-top: 1px solid #fff;
    }

    .vector-main-menu li a {
        color: white;
        text-decoration: none;
        font-size: 18px;
    }

    /* Add a class to make the menu visible when clicked */
    .menu-visible {
        display: block;
    }
}