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>
Papathemes
Comments