• 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

Burger Menu in Desktop View

Scheduled Pinned Locked Moved General Discussion
4 Posts 3 Posters 520 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.
  • N Offline
    N Offline
    Neil
    wrote on last edited by
    #1

    I'd really like to use just a burger menu within the desktop view but there doesn't seem to be any option for this, can anyone recommend a workaround for a custom menu?

    I like the way this menu works https://www.keepamericagreat.com where one action gives you a full spread of menu options.

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

    Dear @Neil

    This is possible but will require basic knowledge of HTML, CSS and JS.

    Lay Theme has provided options for users to be able to implement their own custom code with "Lay Options - Custom HTML & CSS"

    Screen Shot 2020-09-08 at 10.39.54 AM.png

    Here you can add the necessary code for creating the burger menu you desire,

    Also some reference for you if implementing your code:

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

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

    The Basic concept behind menu's like this is that the menu already exists but outside the boundaries of the viewport, when the menu is 'clicked'
    https://www.w3schools.com/jquery/event_click.asp
    https://www.w3schools.com/jquery/eff_toggle.asp

    A class is added to the menu:
    https://www.w3schools.com/jquery/html_addclass.asp

    which gives it new CSS properties pulling it into the viewport,
    The smooth sliding that occurs is from the CSS transition property:
    https://www.w3schools.com/css/css3_transitions.asp

    The Example you like above also uses this method -
    Here we have the menu before:

    Screen Shot 2020-09-08 at 10.47.13 AM.png

    And now when clicked, the Button gets a class called "header__nav-cta--active" this adds new CSS for the arrow to face north

    And also the Navigation gets a class added called "header__nav-wrap--open" Which adds new CSS making the hiding menu now visible

    Screen Shot 2020-09-08 at 10.47.20 AM.png

    Extra for you :)
    Before clicked:

    Screen Shot 2020-09-08 at 11.05.13 AM.png

    After Clicked:

    Screen Shot 2020-09-08 at 11.05.05 AM.png

    .header__nav-wrap--open {
        width: 100%;
        right: 0;
        transition: all 0.8s;
    }
    

    -100% ( 100% off the right side of viewport)

    is now 100% ( full width of viewport )

    I hope this helps you Neil, I'm sorry that i can't pursue this further for you but i do wish you good Luck! :)

    Also seeking the aid of a developer for a singular task like this could be an option for you,

    Let me know if you have any further questions and best for your Lay Theme Journey.

    Sincerely
    Richard

    1 Reply Last reply
    0
  • J Offline
    J Offline
    jerbob
    wrote on last edited by
    #3

    Hey guys !
    hi @Richard-K
    I actually have good Result with : ShiftNav plugin.
    But i have one problem : the page of my menu charge into the URL, but doesnt recharge in my page....
    Could you help me on this ?

    WEBSITE : https://benoitclaude.lu/

    Thanks !

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

    Dear @jerbob

    Thanks for the update with ShiftNav Plugin, good to know :)

    Sorry im just having trouble understanding:
    "the page of my menu charge into the URL, but doesnt recharge in my page"

    Is this " the menu changes to the correct URL but doesn't take me to the correct location on my page"?Screen Shot 2020-12-15 at 4.35.48 PM.png

    Or is it to do with the Menu bar:
    Screen Shot 2020-12-15 at 4.32.46 PM.png

    Best wishes
    Richard :)

    1 Reply Last reply
    0

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. When using a WordPress Cache plugin, disable it or clear your cache.

Now see if your problem solved itself.

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!
Post a link to where the problem is if possible, please <3
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
Online Users
T O H
laytheme.com
  • Login

  • Don't have an account? Register

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

  • Don't have an account? Register

  • Login or register to search.