Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Burger menu in desktop website

    General Discussion
    9
    21
    1442
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Hayo Gebauer
      Hayo Gebauer last edited by

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

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        At the moment no :/

        G 1 Reply Last reply Reply Quote 0
        • Hayo Gebauer
          Hayo Gebauer last edited by

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

          1 Reply Last reply Reply Quote 0
          • Hayo Gebauer
            Hayo Gebauer last edited by

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

            1 Reply Last reply Reply Quote 0
            • G
              gdk @arminunruh last edited by

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

              1 Reply Last reply Reply Quote 1
              • B
                brogr last edited by

                Would like this too.

                1 Reply Last reply Reply Quote 1
                • T
                  thomasmaier last edited by

                  Is there an update on this?

                  Would appreciate - even a workaround for - this

                  1 Reply Last reply Reply Quote 0
                  • arminunruh
                    arminunruh Global Moderator last edited by

                    its still on my list

                    theres no workaround

                    1 Reply Last reply Reply Quote 0
                    • B
                      brogr last edited by

                      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.

                      B H 2 Replies Last reply Reply Quote 0
                      • B
                        brogr @brogr last edited by

                        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/

                        1 Reply Last reply Reply Quote 0
                        • H
                          heleneleuzinger @brogr last edited by

                          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?

                          Screenshot 2020-05-04 at 00.17.18.png

                          Thank you so much for any and all help!

                          1 Reply Last reply Reply Quote 0
                          • mariusjopen
                            mariusjopen Global Moderator last edited by

                            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

                            www.mariusjopen.world

                            B 2 Replies Last reply Reply Quote 0
                            • B
                              brogr last edited by

                              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

                              1 Reply Last reply Reply Quote 0
                              • B
                                brogr @mariusjopen last edited by

                                This post is deleted!
                                1 Reply Last reply Reply Quote 0
                                • B
                                  brogr @mariusjopen last edited by

                                  @mariusjopen That's the idea...

                                  1 Reply Last reply Reply Quote 0
                                  • H
                                    heleneleuzinger last edited by

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

                                    1 Reply Last reply Reply Quote 0
                                    • mariusjopen
                                      mariusjopen Global Moderator last edited by

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

                                      www.mariusjopen.world

                                      1 Reply Last reply Reply Quote 0
                                      • U
                                        umdoistres last edited by

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

                                        Thanks :))

                                        1 Reply Last reply Reply Quote 0
                                        • B
                                          brogr last edited by

                                          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>
                                          
                                          1 Reply Last reply Reply Quote 0
                                          • Richard
                                            Richard Global Moderator last edited by

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

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post
                                            Post a link to where the problem is
                                            I don't answer or check forum DMs, please just post on the forum.
                                            Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                                            Before you post:

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. Now see if your problem solved itself
                                            5. Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            Recent Topics

                                            • F

                                              scroll Overflow on mobile is not working

                                            • P

                                              Different Menu color on Fullscreenslider adding id/class to row

                                            • S

                                              DISABLED FIREFOX LAZYLOADING BRAKES WEBSITE

                                            • Project Thumbnail Grid only showing first two entries

                                            laytheme.com