- add a menu icon in the header
- add a modal with trigger set to an element click but not select a trigger
- add custom CSS to offset the modal backdrop from the top (by setting top and height values) based on the height of admin bar and/or header
- replace the above CSS with jQuery code where we define a custom function that sets the offset and call this function when the modal is shown and when the window is resized using a simple debounce technique.
The next tutorial will extend this by animating the menu icon to a close (X) icon.
Edit your Template/Page with Oxygen.
a) Add an Icon component.
Give it a class of
At Advanced > Custom CSS add
b) Add a Modal component.
Give it a class of say,
Set it to be triggered when user clicks an element. Leave the trigger selector empty.
Since we are most likely going to not want the modal to be closed when the backdrop is clicked, set Close Modal on Backdrop Click to No.
c) Add a Code Block.
This can be anywhere in the Structure. But makes it easy if it is either at the very top or very bottom for easy access.
PHP & HTML:
<?php // echo "hello world!"; ?>
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $499 one-time).
Already a member? Log in below or here.