Creating Mobile Menu / Fixing Slicknav?

  • Hello! I’m afraid this is a bit of a broad question. I’ve spent two days trying to set up a responsive mobile menu for this site. I’ve tried:
    -Three plugins (Responsive Menu, WP Mobile Menu, and Toast Mobile Menu)
    -Following along with three different tutorials for coding it myself using JQuery toggling:
    —–https://wisdmlabs.com/blog/4-easy-steps-to-adding-a-mobile-menu-on-your-wordpress-website/
    —–https://www.wpbeginner.com/wp-themes/how-to-create-a-mobile-ready-responsive-wordpress-menu/
    —–https://bhoover.com/simple-jquery-mobile-menu/
    -At this point I realized my theme comes pre-equipped with slicknav, but that doesn’t work either. I played around with it for a while and read the slicknav documentation but haven’t had any luck. Both with this and the above toggling methods, I made sure I was writing JQuery that was appropriate for WP, loading it first, successfully loading the JS files, hard reloaded and cleared cache to make sure I was seeing changes, carefully looked for conflicts with my theme code, carefully debugged with dev tools and console.logs, etc.
    -I have made some changes to some theme files in the past, so carefully compared between the original theme files and my versions to check whether I broke anything in the pertinent files. mobile.css, slicknav.css, and jquery.slicknav.js are exactly the way they were originally. Each of the changes between the versions of the header.php, functions.php, and style.css files I can account for and make sense of (changing some colors and fonts, removing a sidebar, adding a follow button, nothing too convoluted). Nothing causes errors or looks broken.

    I’m so incredibly frustrated and I don’t know what else to try. Does anyone have any general advice, routes I haven’t tried yet, or ideas about what might be keeping every avenue from working on this? I figure making my slicknav menu work is probably the path of least resistance, but almost all the files involved are identical between my current files and the ones I originally downloaded, and none of the differences go near anything to do with menus or navigation, so I’m just not sure what to do. I’ll also take any plugin or tutorial recommendations, and any ideas about anything super obvious I may have missed that’s making every possibility not work.

    At this point I’m half expecting some extremely obvious file somewhere that says the equivalent of “if(going to make a mobile menu){don’t}” lol but I’m just not seeing it.

    You can see a live demo of the original theme here, which I’ve been inspect-element-ing in vain to try to figure out *what* the difference is that makes their slicknav menu work and mine not show up: https://dessign.net/gridly-free-theme/

    Thank you for any and all help, words of encouragement, and advice! ??

    • This topic was modified 2 years, 8 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    It’s not clear what you’re trying to accomplish if the original theme’s menu is working. If it is not working “out of the box”, contact the theme’s developer for advice or chose a theme that works as-is.

    If you want to develop your own responsive menu to learn what’s involved, I suggest starting with a basic framework such as the menu scheme in a starter theme such as _s (underscore S). The menu out of the box is very basic and completely un-styled. Build upon that basic menu. Trying to modify a fully developed theme is much more difficult.

    Whatever you start with, it should initially be working. Don’t waste your time trying to debug someone else’s broken work. If you choose to further modify it, that’s fine. Make small incremental changes and test frequently (disable any caching). If something should break, you know it’d be due to the last incremental change.

    Thread Starter ellenpop

    (@ellenpop)

    You’re right. I re-downloaded and temporarily restored all the original theme files and the mobile menu is broken out of the box, and I’ve spent way too long trying to sort out why.

    I picked this theme because I liked its masonry and basically nothing else about it, figured since I’m going to gut it and build much of it myself anyway it’s as good a place to start as any. Thanks for showing me _s, as I didn’t realize there were themes out there for this specific purpose.

    The theme’s developer site seems to imply support is only available for paying customers, which I am not. I’ll reach out anyway and see whether they have any useful information.

    Thank you for the advice, I really appreciate it. I’ll consider my options.

    Moderator bcworkz

    (@bcworkz)

    There are even more options! There are many masonry-type plugins available. Most are specifically for photo galleries, but it appears that some will apply masonry to a post grid. You could apply the generic Masonry jQuery module to any theme, though it may require altering the templates to achieve a compatible HTML structure. The Masonry module can be more easily applied to a starter theme since its HTML structure is more easily altered.

    Thread Starter ellenpop

    (@ellenpop)

    Thank you!! I really appreciate the help. I didn’t know much about WordPress themes starting out, but it’s good to know there’s lots of options out there that achieve a similar effect.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Creating Mobile Menu / Fixing Slicknav?’ is closed to new replies.