Horizontal menu – slide behind header

Hi @menschenschreck

You can’t set the slide behind the header. It is not possible because the menu is wrapped by the header. So no matter how small the z index is set, the slider will always be on top. Maybe the other solution, you can animate the position to the element inside the wrapper instead the wrapper itself.

/* Flyout TOP */

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper {
    max-width: 90%;
    height: auto !important;
    top: 71px;
    left: unset;
    right: 5%;
    overflow: hidden;
    background: transparent;
    visibility: hidden;
    transition: visibility 0.001s;
    transition-delay: 2s;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper > div {
    position: relative;
    top: -1000px;
    background: #f7f7f7;
    transition: top 4s cubic-bezier(0.6, 0.1, 0.68, 0.53);
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active {
    max-width: 90%;
    top: 71px;
    left: unset;
    right: 5%;
    visibility: visible;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active > div {
    top: 0px;
}

Can you send me your hamburger icon? It can’t load on my side also when I go to the link to download the icon, it can’t be reached.

Hi Pradnya,

thank you very much for this solution. I changed it a bit and it works great for me now.
I commented out the delay, I think the menu slides nicer without. Is there a special reason for the short delay, something I don’t see? Here my working code:

/* Flyout TOP */

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper {
    max-width: 90%;
    height: auto !important;
    top: 80px;
    left: unset;
    right: 5%;
    overflow: hidden;
    background: transparent;
    visibility: hidden;
    transition: visibility 1s;
/*  transition-delay: 0.001s;  */
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper > div {
    position: relative;
    top: -500px;
    background: #f6f6f6;
/*  opacity: 0.95;  */	
    transition: top 1s ease;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active {
    max-width: 90%;
    top: 80px;
    left: unset;
    right: 5%;
    visibility: visible;
}

.always-hamburger .guten-nav-menu.guten-element .gutenverse-menu-wrapper.active > div {
    top: 0px;
}

The hamburg icons are not accessible from the internet because I’m still working on a virtual machine. But here is a download link for you:

https://drive.google.com/file/d/1zwOA0Hb7bUDHGbjvbABQd8v9pX0GxDtO/view?usp=sharing

I hope the download works via my link.

Thanks again.

Hi menschenschreck,

Previously I was looking for some solutions so the menu slides behind the header. The other solution had a problem where the wrapper background disappeared before the menus. Therefore I added a delay.

Seems like the delay is no longer needed. You can delete it.

For the hamburger menu, it caused by css hover. The touch devices don’t have hover. When you click, it will be considered as a hover. To fix this you need to add CSS for touch devices. Here is the code.

@media (hover: none) {
    .always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-menu i::before {
        background-image: url("assets/icons/Hamburger-NEW_weiss.svg") !important;
    }

    .always-hamburger .guten-nav-menu.guten-element .gutenverse-hamburger-wrapper.active .gutenverse-hamburger-menu i::before {
        background-image: url("assets/icons/Hamburger-NEW_schwarz.svg") !important;
    }
}

Also, because the hamburger menu wrapper doesn’t have active class when clicked. You need add a script.

document.addEventListener("DOMContentLoaded", function (event) {
    Array.from(document.getElementsByClassName("guten-nav-menu")).forEach(function (navMenu) {
        var hamburgerWrapper = navMenu.querySelector(".gutenverse-hamburger-wrapper");

        hamburgerWrapper.addEventListener("click", function (e) {
            if (e.currentTarget.classList.contains("active")) {
                e.currentTarget.classList.remove("active");
            } else {
                e.currentTarget.classList.add("active");
            }
        });
    });
});

Add it to script.js and load it using PHP code on the functions.php. Your previous wp_enqueue_scripts code will be like this.

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );
		wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/script.js' );
	},
	999
);

Hi Pradnya,

sorry I’m late. But I’m trying a lot of things at the moment and my WordPress installation is messed up.

I just tested your code snippets and now I get a critical error, my site is down.
I need to find out what I can do to fix the site now.

Also tried replacing the navicon with one of https://jonsuh.com/hamburgers/
I think I tried too much and now everything is down. Will try (and ‘try’ again) to fix it, but it may take time.

If you want, we can close the topic, since the main issue has been resolved.

Thank you again ??

Alright, I will close this topic now. If you need help, you can create another topic and discuss it there.