the answer for all question about Oxygen Builder plugin and WordPress

Hi All… Wanted to stop the desktop menu from rendering on mobile, dont want to


Hi All… Wanted to stop the desktop menu from rendering on mobile, dont want to use display:none as it still loads the menu at user end.
Found this tutorial that gives the solution, I added the following code with my selector in the Code Block but its not working, doesnt give any error but the menu doesnt hide. Any idea how I can make this work.


https://www.geeksforgeeks.org/how-to-hide-an-html-element-in-mobile-view-using-jquery/



Source

3 Comments
  1. Niko Hannula says

    That solution will still load the menu for the user and hide it after.
    Unless your menu is massive with desktop – specific large images I wouldn’t worry about it. If it’s just a different layout it might be better to load it for all devices and just hide it with display:none.

  2. Robert Chan says

    well you don’t need to load jquery again since it’s already loaded in oxygen.

    also hide() is the same as using display:none on an element, remove() would remove the element from the DOM
    so to call remove() on your element in oxygen you’d do
    jQuery(“.your-class”).remove().

    However the element will still be “loaded” (downloaded? visible in source code?) in the first place to be removed because the javascript is ran *after* the page has loaded.

    If you consider the amount of html in a menu to be a problem for mobile users then maybe you can design a purely mobile page and redirect the user to that page based on the criteria you want.

    Or you can research how to do it in php or in your webserver since the user-agent is sent as a http header in the request then you can change the response based on that criteria but that is above and beyond for something like a menu imo.

    lastly, you’re assuming any browser with the string Mobile in its user-agent is a mobile user but you’re excluding desktop browsers who might be running in a smaller window.

    jQuery instead of $ because that’s how you’d access it.
    see:
    https://oxygenbuilder.com/documentation/code/javascript/

  3. Ethan Chin says

    jquery’s .hide() just add “display: none” as an inline style lol. .remove() would take it out of the DOM all together if that’s what you want, but imo display: none should be more than enough. You also need to take into account a user using a small browser window on desktop then enlarging it. The menu has to respond to window size changes.

Leave A Reply

Your email address will not be published.