{"id":619,"date":"2020-07-10T16:33:26","date_gmt":"2020-07-10T15:33:26","guid":{"rendered":"https:\/\/www.graphicz.co.uk\/blog\/?p=619"},"modified":"2020-07-16T11:16:24","modified_gmt":"2020-07-16T10:16:24","slug":"the-ability-to-scroll-the-mobile-menu-in-swift-a-fix","status":"publish","type":"post","link":"https:\/\/www.graphicz.co.uk\/blog\/the-ability-to-scroll-the-mobile-menu-in-swift-a-fix\/","title":{"rendered":"The Ability to scroll the mobile menu in Swift – a fix"},"content":{"rendered":"\n

Scroll the mobile menu in Sellerdeck Swift<\/h2>\n\n\n\n

If you have several sections then in Swift in mobile view only a certain number will be visible because the Code:<\/p>\n\n\n\n

div.header-section<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
Open the sylesheet and add the following lines to the bottom of the stylesheet but above –<\/p>\n\n\n\n
 CSSDefinition<\/pre>\n\n\n\n
if using php minification:<\/p>\n\n\n\n
.your-extra-css {\nposition:relative!Important;\n}\n#header-support-xs.your-more-css {\ndisplay:none!Important;\n}<\/pre>\n\n\n\n
Finally add the following to the javascript footer functions:<\/p>\n\n\n\n
$(\".wsdownmenu-animated-arrow\").click (function() { $('.header-section').toggleClass('your-extra-css'); $('#header-support-xs').toggleClass('your-more-css');\n});<\/pre>\n\n\n\n
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<\/a><\/p>\n\n\n\n
But!<\/strong><\/p>\n\n\n\n
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:<\/p>\n\n\n\n
.sectionMenu.mobile {\nheight: 100%;\noverflow: auto;\n}\n.sectionMenu.mobile ul {\noverflow: auto;\nposition: relative;\nmax-height: 400px;\n}<\/pre>\n\n\n\n
Please let me know of with any problems\/improvements<\/p>\n\n\n\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/span> <\/p>\n
Read more ›<\/b><\/div>\n
<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-619","post","type-post","status-publish","format-standard","hentry","category-graphicz-articles"],"_links":{"self":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/619"}],"collection":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":5,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/619\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/619\/revisions\/625"}],"wp:attachment":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}