Scroll the mobile menu in Sellerdeck Swift
If you have several sections then in Swift in mobile view only a certain number will be visible because the Code:
div.header-section
is fixed. This is so that the mobile nav bar stays visibile but it is annoying as you cannot scroll down to see all the section list.
This is easily solved.
Open the sylesheet and add the following lines to the bottom of the stylesheet but above –
CSSDefinition
if using php minification:
.your-extra-css { position:relative!Important; } #header-support-xs.your-more-css { display:none!Important; }
Finally add the following to the javascript footer functions:
$(".wsdownmenu-animated-arrow").click (function() { $('.header-section').toggleClass('your-extra-css'); $('#header-support-xs').toggleClass('your-more-css'); });
When you click the hamburger the page will be scrollable, when you click again to close the menu the mininav will be fixed.
Try it here: https://www.graphiczdev.co.uk/wish/index.html
But!
Unfortunately there is a drawback with this. If the page is long and you are at the bottom (on your phone) and you click the menu ‘hamburger’ the menu bar disappears and you are left at the bottom of the page with nowhere to go!
So, remove the script above from the js footer functions.
Add this to the stylesheet:
.sectionMenu.mobile { height: 100%; overflow: auto; } .sectionMenu.mobile ul { overflow: auto; position: relative; max-height: 400px; }
Please let me know of with any problems/improvements
Keep in touch and share
Graphicz on Social Media
01323 872296. 07836 551000.
Email: