Burger menu in desktop website

mariusjopen

Dear @heleneleuzinger
We would not recommend to change the code inside the theme folder. It will get overwritten with the next update. Try to use the CUSTOM CSS and JQUERY section.
Best!
Marius

brogr

Hi @heleneleuzinger
You'd find most of the relevant CSS code in frontend/style_phone.php: look for .mobile-nav and the relevant mobile-menu-style. As I said, this solution isn't ideal, as lay upgrades might make your custom CSS code faulty.
The more stable approach I'd recommend is to use custom CSS and JS to adjust the appearance and behaviour of the desktop menu itself...
Best

brogr

This post is deleted!

brogr

@mariusjopen That's the idea...

heleneleuzinger

Thank you very much! I'll try my hand at that :-)

mariusjopen

Dear @heleneleuzinger
Perfect! Glad to hear!
Many wishes!
Marius

umdoistres

Is there any way of doing this now? Or any kind soul would share their work around?

Thanks :))

brogr

Use the following custom CSS and JS to adjust the appearance and behaviour of the desktop menu. You can see it in action on https://quantaviva.ch

Custom CSS for Desktop Version:

nav.laynav.primary:before {
    display: block;
    content: "–––\A–––\A–––";
    white-space: pre-wrap;
    line-height: 0.6em;
    font-weight: 900;
    cursor: pointer;
}
    nav.laynav.primary.toggled:before {
        content: "✕";
        font-size: 1.5em;
        line-height: 1.15em;
    }
nav.laynav ul {
    display: none;
    width: 96vw;
    background: #fff;
}

Custom <head> content:

<script>
jQuery( document ).ready(function( $ ) {
    $(".laynav.primary").on("click", function(e){
        $(this).toggleClass("toggled").children("ul").toggle();
    });
});
</script>

Richard

Thanks @brogr 👍
Screen Shot 2022-03-03 at 5.03.37 PM.png

umdoistres

oh cool - thanks @brogr :))

Lay Theme Forum

Burger menu in desktop website

Before you post:

When you post:

Online Users