The breakpoint for Sellerdeck Swift is 767px. That is the width of browser viewport (screen) when the layout changes for 'desktop' style to 'mobile' style where the mega menu becomes a vertical dropdown triggered by the 'hamburger' button and the header area is more compact. (In Smart the breakpoint is 800px.)
767px is quite narrow, compare with John Lewis (https://www.johnlewis.com/) where the breakpoint is 1024.
This allows more items to appear in the desktop megamenu, particularly if you take the 'font-weight:bold;' off. Also the menu items and the subheader items do not fold, particularly if you have several social media icons.
Changing the breakpoint in Smart was a nightmare as the media queries are many and varied and spread across three stylesheets! Happily it is more straightforward in Swift.
This is for a default site. If you have customised the stylesheet you will have to search for '767' to find the respective lines to change.
Take a snapshot first! And maybe, as well, copy the files you are going to change so you have backups.
In Design View:
Layout 'UXHeader Swift':
Change
to
Layout 'Swift Stylesheet':
span.small-logo and span.large-logo leave at 440
line 3130 css change 767 to 991
line 4085 css change 767 to 991
line 4374 css change 768 to 992
Files in Site Folder:
webslidemenu.css - search for 767 and change 767 to 991 three places
webslidemenu.js - search for 767 and change 767 to 991 one place
Preview page and test. Use Firefox, click the three lines top right, Click 'Web Developer' in the drop down, then click 'Responsive Design Mode' (Ctrl+Shift+M)
Try it at: https://www.graphicz.solutions/swiftv10005/
767px is quite narrow, compare with John Lewis (https://www.johnlewis.com/) where the breakpoint is 1024.
This allows more items to appear in the desktop megamenu, particularly if you take the 'font-weight:bold;' off. Also the menu items and the subheader items do not fold, particularly if you have several social media icons.
Changing the breakpoint in Smart was a nightmare as the media queries are many and varied and spread across three stylesheets! Happily it is more straightforward in Swift.
This is for a default site. If you have customised the stylesheet you will have to search for '767' to find the respective lines to change.
Take a snapshot first! And maybe, as well, copy the files you are going to change so you have backups.
In Design View:
Layout 'UXHeader Swift':
Change
Code:
<div class="sub-header d-none d-md-block">
Code:
<div class="sub-header d-none d-lg-block">
span.small-logo and span.large-logo leave at 440
line 3130 css change 767 to 991
Code:
@media (max-width:767px) {
.payment-authorization td {
etc...
Code:
@media only screen and (max-width:767px) {
.p-xs-0{
padding: 0 !important;
etc...
line 4374 css change 768 to 992
Code:
@media only screen and (min-width: 768px) {
.Shopping-Cart-content-body .pay-buttons {
display: flex;
etc...
webslidemenu.css - search for 767 and change 767 to 991 three places
webslidemenu.js - search for 767 and change 767 to 991 one place
Preview page and test. Use Firefox, click the three lines top right, Click 'Web Developer' in the drop down, then click 'Responsive Design Mode' (Ctrl+Shift+M)
Try it at: https://www.graphicz.solutions/swiftv10005/