Burger menu in desktop website

mariusjopen · May 4, 2020, 6:10 PM

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 · wrote on May 4, 2020, 6:08 PM

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 · wrote on May 4, 2020, 6:10 PM

This post is deleted!

brogr · wrote on May 4, 2020, 6:13 PM

@mariusjopen That's the idea...

heleneleuzinger · wrote on May 4, 2020, 7:08 PM

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

mariusjopen · wrote on May 6, 2020, 2:45 PM

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

umdoistres · wrote on Mar 1, 2022, 8:54 AM

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

Thanks :))

brogr · wrote on Mar 1, 2022, 10:07 AM

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 · wrote on Mar 3, 2022, 4:08 AM

Thanks @brogr 👍

umdoistres · wrote on Mar 7, 2022, 9:40 AM

oh cool - thanks @brogr :))

Lay Theme Forum

Burger menu in desktop website

Before you post:

When you post:

Online Users