Horizontal menu

The Supermarket theme is not designed for horizontal menu, so you need to add the below CSS to your Footer Script.

- Step 1: Go to Manager panel > Storefront > My Themes > Customize (Theme Editor) > Global > Layout > Select "Default"

- Step 2: Copy the below CSS to your Footer Script (Manager panel > Storefront > Footer Script).

Notice that the horizontal menu only suitable for the website, which has a few menu (less than 8 menus in top), if your website has a huge top menu, we recommend use the vertical menu.

<style>
@media (min-width: 801px) {
.navPages {flex-flow: row wrap;}
.emthemesModez-navPages-verticalCategories-container:hover .emthemesModez-verticalCategories.is-open {box-shadow: none;}
.emthemesModez-navPages-verticalCategories-container > .navPages-action {display: none;}
.emthemesModez-navPages-verticalCategories-container .emthemesModez-verticalCategories {position: static; display: block !important; border: 0;}
.navPages>.emthemesModez-navPages-verticalCategories-container {display: block; width: 100%; flex: inherit; margin: 0; z-index: 999;}
.emthemesModez-verticalCategories .navPages-list {display: flex; flex-flow: row wrap; justify-content: center;}
.emthemesModez-verticalCategories .navPages-item {width: auto;}
.emthemesModez-verticalCategories .navPages-item:hover{z-index: 999;}
.emthemesModez-verticalCategories .navPages-item+.navPages-item>.navPages-action {border: 0;}
.emthemesModez-verticalCategories .has-subMenu.is-open .navPages-action-moreIcon {-ms-transform: rotate(0); transform: rotate(0)}
.emthemesModez-verticalCategories .navPage-subMenu, .emthemesModez-verticalCategories .navPage-subMenu.is-open {left: 0; top: 100%; width: 100%; padding: 10px;}
.emthemesModez-verticalCategories .navPage-subMenu-item .navPages-action {padding: 10px; border: 0;}
.emthemesModez-verticalCategories .navPage-subMenu-item .navPages-action.has-subMenu {font-weight: normal; text-transform: none;}
.emthemesModez-verticalCategories .navPage-subMenu-item .navPages-action .navPages-action-moreIcon {display: block;}
.emthemesModez-verticalCategories .navPage-subMenu-item {position: relative; padding: 0;}
.emthemesModez-verticalCategories .navPage-subMenu-item:hover {z-index: 999;}
.emthemesModez-verticalCategories .navPage-subMenu-item .navPage-childList {display: none; position: absolute; left: 16px; top: 100%; width: calc(100% - 32px); margin: 0 !important; background: #ffffff; box-shadow: 2px 2px 5px rgba(0,0,0,0.3);}
.emthemesModez-verticalCategories .navPage-subMenu-item:hover > .navPage-childList {display: block;}
.emthemesModez-navPages-verticalCategories-container+.navPages-list {display: flex; flex-flow: row wrap; justify-content: center; width: 100%;}
}
</style>