Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Use mobile menu on desktop, easy tutorial? Drop down menu right aligned text?

Use mobile menu on desktop, easy tutorial? Drop down menu right aligned text?

Scheduled Pinned Locked Moved General Discussion
13 Posts 4 Posters 693 Views
  • 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.
  • RichardR Offline
    RichardR Offline
    Richard
    Global Moderator
    wrote on last edited by
    #4

    Dear Sarah

    @sarahmorrison

    I can help you with the above questions šŸŒ
    What was your website domain again? or were you working offline ( I feel we talked about this on another thread sorry, but i loose track! )


    Talk soon & have a wonderful day Sarah šŸ–
    Richard
    S 1 Reply Last reply
    0
    • RichardR Richard

      Dear Sarah

      @sarahmorrison

      I can help you with the above questions šŸŒ
      What was your website domain again? or were you working offline ( I feel we talked about this on another thread sorry, but i loose track! )


      Talk soon & have a wonderful day Sarah šŸ–
      Richard
      S Offline
      S Offline
      sarahmorrison
      wrote on last edited by
      #5

      @Richard no problem, thanks so much for the help. Our site is wonderandwork.com but it's currently just a holding page. Let me know what you need?!

      Another side question, I also noticed the close 'X' on mobile doesn't use the prescribed padding, it locks to the top right with 0px padding.

      1 Reply Last reply
      0
      • RichardR Offline
        RichardR Offline
        Richard
        Global Moderator
        wrote on last edited by Richard
        #6

        Dear Sarah

        @sarahmorrison

        it's currently just a holding page

        I see, allgood i can setup some basic example's on a test site for you.


        First Question:

        I would love to know how to change the dropdown menu title to an image so I can use a burger and 'X' icon. Could you please advise?

        If you wish to use Lay Theme's built in Burger Menu then you will have to create all Layout's within your Mobile Layout. If you do not wish to use only Mobile Layouts then it will need to be custom coded to appear on Desktop Layouts.

        Here is a basic setup, a Sub-menu with three projects inside (please note: my "sub-menu" was created with the "custom-links" option, we will be using it's data-type later) :
        Screen Shot 2021-11-09 at 10.56.54 AM.png
        Screen Shot 2021-11-09 at 10.28.37 AM.png

        I want to give this "Sub-menu" a custom class so i can easily target it. To do this I go into my Menu options and click "screen Options" in the right hand top corner:
        Screen Shot 2021-11-09 at 10.30.33 AM.png

        Then i choose the Option "CSS Classes"
        Screen Shot 2021-11-09 at 10.30.59 AM.png

        Now i can give my Sub-menu Title a CSS Class, for example custom-burger
        Screen Shot 2021-11-09 at 10.37.27 AM.png

        Checking on the Front-end i can confirm that my Sub-menu now has the added class custom-burger ( right-click - inspect ):
        Screen Shot 2021-11-09 at 10.39.12 AM.png

        We could use jQuery to replace text with image but for this we can make use of some simple css ( here the custom link comes in handy to specify ), (Code can be inserted into your Lay Theme website via > Lay Options > Custom CSS & HTML or > Customize > CSS:

        https://laytheme.com/documentation.html#custom-css-styling

         .custom-burger [data-type="custom"] { content: url(https://rickei3.dreamhosters.com/wp-content/uploads/2021/11/menu.png); }
        

        https://www.w3schools.com/cssref/pr_gen_content.asp

        The above code is replacing the text with an image defined by it's URL path. You can get url path of any image from your Media Library. > Appearance > Media >

        Upload any image and then see it's details, in the bottom right corner you can copy the URL file path and insert it into the above code, replacing my example:
        Screen Shot 2021-03-23 at 7.55.24 PM.png

        Your code may look like similar too this:

         .custom-burger [data-type="custom"] { content: url(https://sarahswebsite/wp-content/uploads/2021/11/menu.png); }
        

        Lets see the result, Closed sub-menu:
        Screen Shot 2021-11-09 at 11.22.11 AM.png

        Open Sub-menu:
        Screen Shot 2021-11-09 at 11.22.15 AM.png

        so now we need the final piece which it to make sure that the Burger is replace by an 'x' when then sub-menu is open.
        When the Sub-menu is 'open' a class is added called show-submenu-desktop . We can take advantage of this for our 'X' button:
        Screen Shot 2021-11-09 at 11.23.56 AM.png

        Here the code defines that only when this class is added (meaning the sub-menu is open) do we change the image.

        .show-submenu-desktop [data-type="custom"] { content: url(https://rickei3.dreamhosters.com/wp-content/uploads/2021/11/close.png); }
        

        This image is an 'x' remembering i took the URL file path and inserted into the code. Lets see the Result!

        Submenu closed:
        Screen Shot 2021-11-09 at 11.28.46 AM.png

        And sub-menu open:
        Screen Shot 2021-11-09 at 11.28.51 AM.png

        I wont go into dimensions of the Image Sarah and will leave this up to you, this will be dependent on your design needs and how you want your site.

        https://www.javatpoint.com/how-to-change-image-size-in-css


        Questions 2:

        "Is there a way to adjust (increase) the line spacing between drop down menu items? I tried to change the text format but it is still tight. (screenshot attached)"

        You can adjust the space between menu-items via > Customize > Menu styles > Submenus > Space between submenu points >

        Here i have exaggerated 40px to show you:
        Screen Shot 2021-11-09 at 11.37.22 AM.png


        Hope this helps you Sarah, the finer tuning will need to be done by you, but this is one way of changing the sub-menu into a "burger-menu" while still using Desktop Layouts.


        Best wishes & have a wonderful day 🌻
        Richard
        1 Reply Last reply
        0
        • S Offline
          S Offline
          sarahmorrison
          wrote on last edited by
          #7

          Thank you SO much @Richard this has all worked brilliantly! I really appreciate your help, thanks again for such an awesome theme! :)

          1 Reply Last reply
          0
          • RichardR Offline
            RichardR Offline
            Richard
            Global Moderator
            wrote on last edited by
            #8

            Great to hear all is working @sarahmorrison Have a great day and thank you for supporting Lay Theme šŸŒ

            1 Reply Last reply
            0
            • F Offline
              F Offline
              FesT
              wrote on last edited by
              #9

              Hi @Richard, @mariusjopen,

              the described workaround, seems to be a very easy way to implement a burger menu in the desktop view. Thanks for this.

              I tried to implement it, but in my sub-menu are custom links witch have also the data-type="custom". So also the submenu items get displayed as the image. Is there a way to use also custom links as submenu items?

              thx

              1 Reply Last reply
              0
              • RichardR Offline
                RichardR Offline
                Richard
                Global Moderator
                wrote on last edited by
                #10

                Dear @FesT

                This is a good point and actually not very good from me to not realise! so sorry.

                I'm sure there are a few ways but this is quick.
                We can add a custom class to our Sub-menu, here i create one called magic-world

                Screen Shot 2022-02-11 at 12.22.20 PM.png

                Then i can check and see if this registered:
                Screen Shot 2022-02-11 at 12.24.53 PM.png

                Cool it did! ✨
                Lets make use of this target now, adding some simple jQuery saying get me "magic-world" and its child (which is an <a> or link element) give that child a class called wham!

                jQuery(".magic-world").children('a').addClass("wham!");
                

                When the code is inserted into your webpage via > Lay Options > Custom CSS & HTML > we should really wrap it in a newpage event to work properly with Lay Theme e.g:

                window.laytheme.on("newpageshown", function(){
                     jQuery(".magic-world").children('a').addClass("wham!");
                });
                
                

                https://laytheme.com/documentation/custom-javascript.html


                Now we dont need to use data-type- custom to specify we can use wham! :

                Screen Shot 2022-02-11 at 12.28.58 PM.png

                Therefore the code earlier on this thread:

                 .custom-burger [data-type="custom"] { content: url(https://rickei3.dreamhosters.com/wp-content/uploads/2021/11/menu.png); }
                

                would now be

                 .custom-burger .wham! { content: url(https://rickei3.dreamhosters.com/wp-content/uploads/2021/11/menu.png); }
                
                

                ( i see that earlier i gave it a custom class of custom-burger and this time ive called it magic-world maybe dont call it magic world šŸŒ but stick to the custom burger for continuities sake! )

                Sorry if ive confused, let me know if i can clear anything up


                Best wishes
                Richard
                F 1 Reply Last reply
                0
                • RichardR Richard

                  Dear @FesT

                  This is a good point and actually not very good from me to not realise! so sorry.

                  I'm sure there are a few ways but this is quick.
                  We can add a custom class to our Sub-menu, here i create one called magic-world

                  Screen Shot 2022-02-11 at 12.22.20 PM.png

                  Then i can check and see if this registered:
                  Screen Shot 2022-02-11 at 12.24.53 PM.png

                  Cool it did! ✨
                  Lets make use of this target now, adding some simple jQuery saying get me "magic-world" and its child (which is an <a> or link element) give that child a class called wham!

                  jQuery(".magic-world").children('a').addClass("wham!");
                  

                  When the code is inserted into your webpage via > Lay Options > Custom CSS & HTML > we should really wrap it in a newpage event to work properly with Lay Theme e.g:

                  window.laytheme.on("newpageshown", function(){
                       jQuery(".magic-world").children('a').addClass("wham!");
                  });
                  
                  

                  https://laytheme.com/documentation/custom-javascript.html


                  Now we dont need to use data-type- custom to specify we can use wham! :

                  Screen Shot 2022-02-11 at 12.28.58 PM.png

                  Therefore the code earlier on this thread:

                   .custom-burger [data-type="custom"] { content: url(https://rickei3.dreamhosters.com/wp-content/uploads/2021/11/menu.png); }
                  

                  would now be

                   .custom-burger .wham! { content: url(https://rickei3.dreamhosters.com/wp-content/uploads/2021/11/menu.png); }
                  
                  

                  ( i see that earlier i gave it a custom class of custom-burger and this time ive called it magic-world maybe dont call it magic world šŸŒ but stick to the custom burger for continuities sake! )

                  Sorry if ive confused, let me know if i can clear anything up


                  Best wishes
                  Richard
                  F Offline
                  F Offline
                  FesT
                  wrote on last edited by
                  #11

                  Thanks to the magic-world everything is working fine! @Richard thank you.

                  1 Reply Last reply
                  1
                  • RichardR Offline
                    RichardR Offline
                    Richard
                    Global Moderator
                    wrote on last edited by
                    #12

                    Thank you for supporting Lay Theme @FesT Best wishes ✨

                    1 Reply Last reply
                    0
                    • emgeofficeE Offline
                      emgeofficeE Offline
                      emgeoffice
                      wrote on last edited by emgeoffice
                      #13
                      This post is deleted!
                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      arminunruhA
                      arminunruh
                      G
                      Glyph
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search