From 2587dbbdb3d8059f254861fd0cfffeba073f14ce Mon Sep 17 00:00:00 2001
From: Jerry Liu <tech2@oodda.com>
Date: Tue, 15 Oct 2019 12:34:00 -0700
Subject: [PATCH] revised  mega menu

---
 .../templates/html/desktop/topmenu.phtml      | 53 +++++--------------
 .../Magento_Theme/templates/html/header.phtml | 24 +++++----
 .../Alothemes/segway/web/css/local.css        | 43 ++++++++++-----
 3 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/app/design/frontend/Alothemes/segway/Amasty_MegaMenu/templates/html/desktop/topmenu.phtml b/app/design/frontend/Alothemes/segway/Amasty_MegaMenu/templates/html/desktop/topmenu.phtml
index c89c435..4393be2 100644
--- a/app/design/frontend/Alothemes/segway/Amasty_MegaMenu/templates/html/desktop/topmenu.phtml
+++ b/app/design/frontend/Alothemes/segway/Amasty_MegaMenu/templates/html/desktop/topmenu.phtml
@@ -13,46 +13,17 @@
          data-ammenu-js="desktop-menu"
          data-mage-init='{"amastyMegaMenu":{"stickyStatus": <?= $block->escapeHtml($block->getStickyState())?>,
               "desktopStatus": 1 }}'>
-    <nav class="container">
-        <div class="row">
-                <div class="col-lg-12">
-                <img style="display:none" class="logo sticky-logo" src="https://segwayconsumer.ooddademo.com/pub/media/logo/stores/1/segway-logo-new2.png" title="Segway Official Store" alt="Segway Official Store" width="200" height="48">
-                <ul class="ammenu-items">
-                    <?php foreach ($block->getMainNodes() as $mainNode) : ?>
-                        <?php
-                        if (!$block->isNeedDisplay($mainNode->getId(), $mainNode->getStatus(), $block::DESKTOP_VIEW)) {
-                            continue;
-                        }
-                        $url = $mainNode->getUrl() ?: '#';
-                        $widthMode = $block->escapeHtml($block->getWidth($mainNode));
-                        $widthValue = $block->getWidthValue($mainNode);
-                        $mainNodeContent = $block->getContent($mainNode);
-                        ?>
-                        <li class="ammenu-item -main -<?= $block->escapeHtml($widthMode)?> <?= /* @noEscape */  $block->getHighLightClass($mainNode)?>">
-                            <a href="<?= $block->escapeUrl($url) ?>"
-                               class="ammenu-link -main<?= ($mainNodeContent) ?' -parent': '' ?>"
-                               title="<?= $block->escapeHtml($mainNode->getName()) ?>">
-                                <?= $block->escapeHtml($mainNode->getName()) ?>
-        
-                                <?php if ($label = $mainNode->getLabel()) : ?>
-                                    <span class="ammenu-label"
-                                          style="color: <?= $block->escapeHtml($mainNode->getLabelTextColor() ?: '#000') ?> !important;
-                                                  background-color: <?= $block->escapeHtml($mainNode->getLabelBackgroundColor() ?: '#fff') ?> !important;">
-                                    <?= $block->escapeHtml($label) ?>
-                                </span>
-                                <?php endif; ?></a>
-        
-                            <?php if (/* @noEscape */ $mainNodeContent) : ?>
-                                <div class="ammenu-submenu-container ammenu-submenu -<?= $block->escapeHtml($widthMode)?>"
-                                     data-ammenu-js="menu-submenu"
-                                        <?= ($widthValue) ? 'style="width: ' . $block->escapeHtml($widthValue) . 'px"': '' ?>>
-                                    <?= /* @noEscape */ $mainNodeContent ?>
-                                </div>
-                            <?php endif;?>
-                        </li>
-                    <?php endforeach; ?>
-                </ul>
-            </div>
-        </div>
+    <nav class="container" style="padding:0">
+                <div class="col-sm-2">
+                    <img  class="logo sticky-logo" src="https://segwayconsumer.ooddademo.com/pub/media/logo/stores/1/segway-logo-new2.png" title="Segway Official Store" alt="Segway Official Store" width="200" height="48">
+                </div>
+                <div class="col-sm-10">
+                    <?php
+                    echo $this->getLayout()
+                        ->createBlock('Magento\Cms\Block\Block')
+                        ->setBlockId('desktop-menu')
+                        ->toHtml();
+                    ?>
+                </div>
     </nav>
 </section>
diff --git a/app/design/frontend/Alothemes/segway/Magento_Theme/templates/html/header.phtml b/app/design/frontend/Alothemes/segway/Magento_Theme/templates/html/header.phtml
index a1a98a7..e00702f 100644
--- a/app/design/frontend/Alothemes/segway/Magento_Theme/templates/html/header.phtml
+++ b/app/design/frontend/Alothemes/segway/Magento_Theme/templates/html/header.phtml
@@ -60,18 +60,22 @@ $msg = $isLoggedIn ? __('Welcome') .', '. $customerSession->getCustomer()->getNa
 					</div>
 			</div>
 		</div>
+		<div class="header-bottom">
+		    <div class="container">
+		        <div class="col-xs-12">
+                    <?php
+                        echo $this->getLayout()
+                        ->createBlock('Magento\Cms\Block\Block')
+                        ->setBlockId('top-submenu')
+                        ->toHtml();
+                    ?>
+                </div>
+            </div>
+		</div>
 		<div class="header-content header-sticker">
-			<div class="container">
-				<div class="row">
-					<div class="content-logo col-xs-6 col-sm-6 col-md-3 col-lg-3 main-logo">
-						<div class="header-logo">
-							<?php echo $this->getChildHtml('logo'); ?>
-						</div>
-					</div>
-					<div>
+			<div class="container" style="padding:0">
+                        <img class="logo mobile-logo sticky-logo" style="display:none" src="https://segwayconsumer.ooddademo.com/pub/media/logo/stores/1/segway-logo-new2.png" title="Segway Official Store" alt="Segway Official Store" width="200" height="48">
 						<?php echo $this->getChildHtml('navigation.sections'); ?>
-					</div>
-				</div>
 			</div>
 		</div>
 	</div>
diff --git a/app/design/frontend/Alothemes/segway/web/css/local.css b/app/design/frontend/Alothemes/segway/web/css/local.css
index 2d149e0..d6f61c2 100644
--- a/app/design/frontend/Alothemes/segway/web/css/local.css
+++ b/app/design/frontend/Alothemes/segway/web/css/local.css
@@ -664,7 +664,7 @@ ol.products #product-short-description {
     padding: 14px 0 10px 10px !important;
 }
 .minicart-wrapper {
-    padding: 13px 0 10px 10px !important;
+    padding: 14px 0 10px 10px !important;
 }
 .minicart-wrapper .showcart span.cart-icon span{
     color: #d8d8d8 !important;
@@ -678,7 +678,7 @@ ol.products #product-short-description {
     font-weight: 600;
 }
 .header .logo {
-    padding: 14px 0 !important;
+    padding: 16px 0 !important;
     max-width: 150px !important;
 }
 
@@ -770,10 +770,27 @@ ol.products #product-short-description {
 }
 
 /* Top Menu */
+.header-bottom {
+    border-bottom:1px solid #ddd;
+    text-align: right
+}
+.top-submenu-item {
+    display: inline-block;
+    margin: 12px 0 12px 30px;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #000;
+}
+@media only screen and (max-width: 1024px) {
+    .header-bottom {
+        display: none;
+    }
+}
 .ammenu-nav-sections .ammenu-content {
     margin-top: 0 !important;
 }
-.-sticky .sticky-logo {
+.-sticky .sticky-logo{
     display:block !important;
 }
 .-sticky {
@@ -782,11 +799,6 @@ ol.products #product-short-description {
    .header .top-right {
     position: relative;
 }
-.header-content,
-.ammenu-menu-wrapper.-desktop .ammenu-item.-main:hover,
-.ammenu-submenu-container {
-   background-color: #F4F4F4 !important;
-}
 .ammenu-items {
     float:right;
 }
@@ -802,11 +814,8 @@ ol.products #product-short-description {
     margin-right: -50vw;
     background-color: #fff;
 }
-.mega-menu-container {
-    margin: 10px 8%;
-}
 .mega-menu-item {
-    width: 11%;
+    width: 10%;
     float: left;
     margin: 10px 0;
     text-align: center;
@@ -817,9 +826,17 @@ ol.products #product-short-description {
     color: #000;
 }
 .mega-menu-item svg {
-    width: 40%
+    width: 50%
 }  
 /* Mobile Menu */
+.mobile-logo {
+    margin-left: 16px !important;
+}
+@media only screen and (max-width: 1024px) {
+    .mobile-logo {
+        display: block !important;
+    }
+}
 .mobile-menu-item {
    border-top: 1px solid #ddd;
 }
-- 
2.21.0

