Lay Theme Forum

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

    Responsive menu

    General Discussion
    4
    6
    912
    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.
    • E
      ED last edited by

      Hi Armin,
      Is it possible to make the menu responsive?
      My menu is quite long and I would like to avoid overlapping.
      Thanks a lot!

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

        Hey ED!

        So you could use a menu with "Menu Points Arrangement": "vertical"

        Doesn't work yet:
        "Lay Options" -> "Add "Tablet" settings to Textformats"
        Textformats can also have extra settings just for a tablet browser size. Currently that doesn't affect Menu and Site Title :/. I will improve that in an update. This way your menu would become shorter with a smaller browser width, because your textformat could have a smaller fontsize for tablet.

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

          Hey ED!

          Please update your theme to the latest version 2.0.8.

          In "Lay Options" scroll to "Textformat Settings" and check "Add "Tablet" settings to Textformats" and save.

          Now go to textformats and create a textformat that you will use for your menu. Add a nice size for the tablet fontsize.

          Now go to "Customize" -> "Menu Style" -> "Menu" and choose your menu textformat in the dropdown "Text Format".

          Now your menu will use the tablet font size of your textformat when your browser is smaller.

          Please note that if you change font specific settings in "Customize" -> "Menu Style" -> "Menu" then the textformat for menu will automatically be deselected, thus the tablet fontsize wouldn't be applied any longer.

          1 Reply Last reply Reply Quote 0
          • R
            rsepierre last edited by

            b5d71c4e-aa0b-4152-966a-7f7982bc5f48-image.png

            Same problem, I have a pretty large menu.

            Idealy I would be able to either set a custom break-point for the menu OR state that I want the burger style menu to start from tablet breakpoint instead of mobile.

            This way I could have an adaptive layout for content : desktop > tablet > mobile.
            But a menu that goes directly to desktop > burger style, starting from tablet breakpoint.

            UPDATE : I have been able to do exactly that by changing just four lines of code in the theme

            Desktop layout Tablet layout Phone Layout
            Classic Menu Burger Menu Burger Menu

            This is a bit "rough" but adding a checkbox would be a piece of cake.

            This is the git diff for current changes

            I will also try to make a snippet that you can add to custom plugin that i'll use in case you don't intend to implement it.

            warning: LF will be replaced by CRLF in themes/lay/customizer/css_output.php.
            The file will have its original line endings in your working directory.
            warning: LF will be replaced by CRLF in themes/lay/frontend/frontend.php.
            The file will have its original line endings in your working directory.
            diff --git a/themes/lay/customizer/css_output.php b/themes/lay/customizer/css_output.php
            index b793d93..570ab02 100644
            --- a/themes/lay/customizer/css_output.php
            +++ b/themes/lay/customizer/css_output.php
            @@ -564,7 +564,7 @@ class CSS_Output{
                     // mobile menu fontsizes
                     $mobileStyles .= CSS_Output::generate_css('nav.mobile-nav li a', 'font-size', 'mobile_menu_fontsize', Customizer::$defaults['mobile_menu_fontsize'], '', 'px');
             
            -        $breakpoint = get_option('lay_breakpoint', 600);
            +               $breakpoint = get_option('lay_tablet_breakpoint', 600);
                     $breakpoint = (int)$breakpoint;
             
                            $tablet_breakpoint = get_option( 'misc_options_textformats_tablet_breakpoint', 1024 );
            @@ -1159,4 +1159,4 @@ class CSS_Output{
                 }
            
             }
            -new CSS_Output();
            \ No newline at end of file
            +new CSS_Output();
            diff --git a/themes/lay/frontend/frontend.php b/themes/lay/frontend/frontend.php
            index b3a177d..c984660 100644
            --- a/themes/lay/frontend/frontend.php
            +++ b/themes/lay/frontend/frontend.php
            @@ -414,10 +414,10 @@ class Frontend{
                            echo
                            '<!-- lay media query styles -->
                            <style>
            -                       @media (min-width: '.(MiscOptions::$phone_breakpoint+1).'px){
            +                       @media (min-width: '.(MiscOptions::$tablet_breakpoint+1).'px){
                                            '.MediaQueryCSS::$desktop.'
                                    }
            -                       @media (max-width: '.(MiscOptions::$phone_breakpoint).'px){
            +                       @media (max-width: '.(MiscOptions::$tablet_breakpoint).'px){
                                            '.MediaQueryCSS::$phone.'
                                    }
                            </style>';
            @@ -712,7 +712,7 @@ class Frontend{
                                            'misc_options_thumbnail_video' => $misc_options_thumbnail_video,
                                            'misc_options_thumbnail_mouseover_image' => $misc_options_thumbnail_mouseover_image,
                                            'breakpoint' => MiscOptions::$phone_breakpoint,
            -                               'tabletbreakpoint' => get_option('lay_tablet_breakpoint', 1024),
            +                               'tabletbreakpoint' => MiscOptions::$tablet_breakpoint,
                                            'shortcodes' => LayShortcodes::$shortcodes_array,
                                            'bg_color' => $bg_color,
                                            'bg_image' => $bg_image,
            (END)
            
            1 Reply Last reply Reply Quote 0
            • R
              rsepierre last edited by rsepierre

              @arminunruh

              After looking into it. There doesn't appear to be an easy way to enable this via third-party plugin without basicaly copying entire files, disabling natives classes and use the extended ones. Which wouldn't be update friendly anyway.

              Would really appreciate if this could come in a future update.

              It's should be a 10 lines update max (adding checkbox and everything) and this could be the result.

              8c0b7efc-5b5e-4cbe-b978-be224654ce34-image.png.

              Would just need to add this option in layoptions.

              Then in the git diff shown above, instead of directly changing phone to tablet, use get_option('menu_breakpoint', 'default') option to use appropriate breakpoint.

              This would be pretty neat I think.

              From what I've seen it doesn't break page layout if you keep those options in wp_localize_script( 'frontend-app', 'frontendPassedData', <options>) (just as in the git diff)

              'breakpoint' => MiscOptions::$phone_breakpoint,
              'tabletbreakpoint' => MiscOptions::$tablet_breakpoint,
              
              1 Reply Last reply Reply Quote 0
              • D
                dolma last edited by

                This would be great! Please make this update soon and XD

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post

                I don't answer or check forum DMs, please just post on the forum.

                Try this to fix issues 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

                • M

                  Tag filter / Maximum width

                • open all links in a thumbnail grid in a new tab

                • text underline

                • centred Carousel fixed width and proportions

                laytheme.com