Off-Canvas Navigation Menu For SmugMug
If you are looking for a different menu than what SmugMug offers, then read on! The tutorial is based on Pure CSS Off-Canvas Menu by Gabriel Neagu.
Add a HTML/CSS block to the top of your header section. The width must be 100% and remove the default 12px on all four sides. Add the following to your newly created HTML/CSS block.
Unfortunately there is no way to automatically add links, so you will have to edit the above HTML code to match your website links.
Now, copy the following Common CSS to your site-wide theme’s custom CSS and NOT the CSS section of the newly created HTML/CSS. Some of the code just doesn’t work ther (I tried), so it has to go to your theme's custom CSS.
If you want your Menu to be to the right like this example SmugMug Off Canvas Navigation Menu, add this under the CSS you just added.
Right Slide CSS
If you want your Menu to be to the left like this example SmugMug Off Canvas Navigation Menu, add this under the CSS you just added.
Left Slide CSS
Depending on your logo, you may need to adjust that block accordingly. My logo is 400px x 65px and I had to set my
-60px to center it.
As always, if you need assistance post your question at the D-Grin Forum.