Need more options

  • Resolved Tim Reeves

    (@tim-reeves)


    4 years, 2 months ago

    I really like that this plugin is lightweight and dedicated to doing just one clear task – such a relief after all the bloatware and exit-intent popups!

    I also like the simple, clear ways it is embedded in WordPress.

    That said: I don’t want to use it, as I would be using it at ALL screen resolutions, so I need options:

    a) To set the size and position of the Hamburger Icon (e.g. right not left)
    b) To have the hamburger icon float over the themes header, rather than defining an own top bar.
    c) To have the panel slide out only as far as its used width (used by menu items), so that a click or tap on a semi-transparent area outside the menu will close it.
    d) To have the pnael slide out from left or right side

    If this happens, I would very gladly use it!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Ciprian

    (@butterflymedia)

    Hey Tim,

    Good suggestions, let me comment on each of them, in case you need to use the plugin right now:

    a) This depends on your theme. If you add a hamburger icon on the right and add the .mobilize-toggle class, then you’ll have a custom trigger.

    b) It used to be like that years ago, but the theme compatibility was a bit shaky. Again, I could add an option in a future version.

    c) Use #mobilize-menu.mobilize-theme-modern { width: auto; } to set the width to auto instead of the default 96%. I will turn this into an option in a future version.

    d) This is also a good one, coming in a future version. You can use it right now with a bit of CSS:

    #mobilize-menu {
    transform: translateX(-100vw) skewY(-4deg);
    border-radius: 0 32px 32px 0;
    right: auto;
    left: 0;
}
    Thread Starter Tim Reeves

    (@tim-reeves)

    Hey Ciprian,

    that was the fastest support I ever had – and bang on the money ??

    I’ve implemented your changes, and embedded them into the header area of the Astra theme (as yet free version).

    See it here: https://nwxrvtnh.weltengeschwister-gesandtschaft.org/

    The Hamburger I’ve set position:fixed, which will work fine when we get the Pro version of Astra and can make the header sticky (if I don’t do it myself in CSS).

    I’m also thinking to make the Hamburger twist to an “X” while open (I’ve seen it so often, sure I’ll find it – if you have a code snippet would be great). The problem may be doing it without JS – I’ve seen a technique which hides a checkbox behind the Hamburger and uses the :checked state in CSS – nifty. Can post here if it helps.

    I still have 2 open wishes:

    • The text “Close” is fixed so for German “Schlie?en” I had to edit the PHP file )-: Would be great if you could add the “Close” text as an Option – no need to bother making Mobilize translatable for one text.
    • The user has to click on the “Close” text or on the original Hamburger to close the menu. Would be so great to have an overlay over the rest of the screen (you know, that semi-transparent thingy) which also closes the menu on tap or click.

    Again, many thanks – am appreciating this cooperation.

    Tim

    • This reply was modified 4 years, 2 months ago by Tim Reeves.
    Thread Starter Tim Reeves

    (@tim-reeves)

    I’ve noticed that you add/remove the class “no-scroll” to <body>. Recently I’ve had problems on large WordPress sites with name collisions – easy to happen with a large theme and a lot of plugins. In my copy I have therefore changed “no-scroll” to “mobilize-no-scroll”.

    Other than that, the addition of a class outside of the toggle button is all we need to chnage its shape when menu is open – so I’m onto that now.

    Thread Starter Tim Reeves

    (@tim-reeves)

    Me again ??
    I’ve just removed the “Close” link from the HTML of the menu pane.
    Could you imagine making it optional?
    I’ve found a great pure CSS animation for morphing a hamburger to an X, and will move the slide-in menu panel to be directly under the toggle element, leaving it visible and clickable. An advantage for the user is that she does not have to move the mouse far from the hamburger toggle to click on menu entries.
    Cheers,
    Tim

    Ciprian

    (@butterflymedia)

    Hey Tim, I didn’t forget about you, and yes, I could make the button optional. I’m just wrapping up some work stuff and then I’ll focus on this plugin.

    Cheers,
    Ciprian

    Thread Starter Tim Reeves

    (@tim-reeves)

    Hi Ciprian,

    I’ve added an overlay pane which can be clicked on to close the menu. Obviously I had to update the plugins code a little, you can get it here if this helps: https://timreeves.de/mobilize.zip

    In the documentation directory you’ll find a file “CSS-Hamburger-Icon.css” which documents how to make a groovy animated hamburger, which morphs to an “X” when the menu is open (picked it up on the net and adapted it a little – fascinating, it’s 6 span tags grouped in a div).

    See it all in action: https://nwxrvtnh.weltengeschwister-gesandtschaft.org/

    BTW great idea just to add a Gutenberg Block after the menu, I’m using it to add another menu and a search box. Again btw what a drag to have to write an own mini-plugin to make a WP menu available per Shortcode (I did not find any Gutenberg Block which would insert a menu, so I had to go the indirect way via a shortcode). Final thought: An option to have the Gutenberg Block inserted before the menu? For example, then you could have a login block before the menu.

    Cheers,

    Tim

    Ciprian

    (@butterflymedia)

    Hey there! I have releases a new version and I have added a configurable left/right slide direction, improved the modern theme width (100%) and added a configurable “Close” element.

    Some things are not there yet, but can be implemented using CSS. Also, the position of the reusable block can be changed by not using a menu at all and putting everything inside the reusable block. The navigation block is coming!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Need more options’ is closed to new replies.