Burger menu in desktop website

Hayo Gebauer · wrote on Dec 28, 2016, 9:33 PM

Is it in any way possible to have the extending burger menu from the mobile layout in the desktop version?

arminunruh · Jun 6, 2019, 10:18 AM

At the moment no :/

Hayo Gebauer · wrote on Jan 2, 2017, 12:13 PM

also not possible to enable to mobile menu in desktop with css?

Hayo Gebauer · wrote on Jan 6, 2017, 4:26 PM

Any CSS experts here?
I'm guessing it must be possible to enable the code of the mobile menu in the desktop version?

gdk · wrote on Jun 6, 2019, 10:18 AM

@arminunruh I would also love to use this. Is it possible (2 years later)?

brogr · wrote on Jul 25, 2019, 12:17 AM

Would like this too.

thomasmaier · wrote on Apr 22, 2020, 1:30 PM

Is there an update on this?

Would appreciate - even a workaround for - this

arminunruh · wrote on Apr 22, 2020, 1:36 PM

its still on my list

theres no workaround

brogr · Apr 28, 2020, 4:21 PM

It's possible but messy. You can hide the desktop menu in the Customizer and copy the CSS code pertaining to the mobile menu from the laytheme files into the custom CSS desktop code in the laytheme options to render the mobile menu visible on desktop. I've done this here: https://annafrei.net/

Generally it works well but the critical problem is that laytheme upgrades often render the custom code obsolete, which then needs to be painstakingly updated.

brogr · B brogr Apr 27, 2020, 3:47 PM

A less messy way is to use custom CSS and JS to adjust the appearance and
behaviour of the desktop menu itself. I've done this here: http://clients.ateliervarga.ch/nz/

heleneleuzinger · B brogr Apr 27, 2020, 3:47 PM

Dear @brogr, thank you for this invaluable tip!
The burger menu on your website annafrei.net is exactly what I'm looking for.

I'm trying to copy my mobile menu into the custom CSS desktop code in my lay theme options, but am unsure which parts exactly I ought to copy and paste, worried I might mess up something as I'm a total newbie with CSS.

Is this what you were referring to as the mobile menu from the laytheme files?

Thank you so much for any and all help!

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 👍

Lay Theme Forum

Burger menu in desktop website

Before you post:

When you post:

Online Users