update

css/list-style-mb.css

@@ -210,6 +210,10 @@ a {
   padding-bottom: 8px;
   color: #707070;
   position: relative;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+       appearance: none !important;
+  border-radius: 0;
 }
 
 .sec-menu-list .nav-link .link_div {
@@ -650,11 +654,15 @@ a {
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
        appearance: none !important;
+  border-radius: 0;
 }
 
 .infoContent .nav-item-link.active {
   color: #EE7800;
   border-bottom: 2px solid #EE7800;
+  -webkit-appearance: none !important;
+  -moz-appearance: none;
+       appearance: none;
 }
 
 .infoContent .likeSee {

css/list-style-mb.scss

@@ -180,6 +180,9 @@ a {
             padding-bottom: 8px;
             color: #707070;
             position: relative;
+            -webkit-appearance : none !important; 
+            appearance: none !important;
+            border-radius: 0;
             .link_div {
                 width: 25px;
             }
@@ -547,9 +550,13 @@ a {
           font-size: 1.12rem;
           -webkit-appearance : none !important; 
           appearance: none !important;
+          border-radius: 0;
+
           &.active {
               color: #EE7800;
               border-bottom: 2px solid #EE7800;
+              -webkit-appearance : none !important; 
+              appearance: none;
           }
       }
   }

css/list-style.css

@@ -395,6 +395,9 @@ body {
 .navbar .navbar-nav .nav-item .nav-link {
   position: relative;
   -webkit-appearance: none !important;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 1.17rem;
+  padding: 1.075rem 10px;
 }
 
 .navbar .navbar-nav .nav-item .nav-link:after {
@@ -402,9 +405,9 @@ body {
   content: " ";
   width: 100%;
   height: 90%;
-  top: 0;
+  top: 10px;
   right: 0;
-  border-bottom: 2px solid #EE7800;
+  border-bottom: 4px solid #EE7800;
   opacity: 0;
   -webkit-transform: opacity 1s;
           transform: opacity 1s;
@@ -784,13 +787,14 @@ a {
   padding: 0.5rem 2.5rem;
   text-decoration: none;
   background-color: transparent;
-  font-size: .9rem;
+  font-size: 1rem;
   color: #727679;
   -webkit-transition: all .3s;
   transition: all .3s;
   -webkit-appearance: none !important;
   -moz-appearance: none;
        appearance: none;
+  border-radius: 0;
 }
 
 @media screen and (max-width: 1200px) {
@@ -801,11 +805,17 @@ a {
 
 .infoContent .nav-item-link:hover {
   color: #EE7800;
+  -webkit-appearance: none !important;
+  -moz-appearance: none;
+       appearance: none;
 }
 
 .infoContent .nav-item-link.active {
   color: #EE7800;
   border-bottom: 2px solid #EE7800;
+  -webkit-appearance: none !important;
+  -moz-appearance: none;
+       appearance: none;
 }
 
 .infoContent .likeSee {

css/list-style.scss

@@ -316,15 +316,18 @@ body {
           .nav-link {
               position: relative;
               -webkit-appearance : none !important; 
+              color: rgba(0, 0, 0, 0.87);
+              font-size: 1.17rem;
+              padding: 1.075rem 10px;
           }
           .nav-link:after {
               position: absolute;
               content: " ";
               width: 100%;
               height: 90%;
-              top: 0;
+              top: 10px;
               right: 0;
-              border-bottom: 2px solid #EE7800;
+              border-bottom: 4px solid #EE7800;
               opacity: 0;
               transform: opacity 1s;
           }
@@ -661,20 +664,25 @@ a {
             padding: 0.5rem 2.5rem;
             text-decoration: none;
             background-color: transparent;
-            font-size: .9rem;
+            font-size: 1rem;
             color: #727679;
             transition: all .3s;
             -webkit-appearance : none !important; 
             appearance: none;
+            border-radius: 0;
             @media screen and (max-width: 1200px) {
                 padding: 0.5rem .8rem;
             }
             &:hover {
                 color: #EE7800;
+                -webkit-appearance : none !important; 
+                appearance: none;
             }
             &.active {
                 color: #EE7800;
                 border-bottom: 2px solid #EE7800;
+                -webkit-appearance : none !important; 
+                appearance: none;
             }
         }
     }

css/style.scss

@@ -242,6 +242,7 @@ body {
         }
     }
     .nav-link {
+
         cursor: pointer;
         @media (max-width: 1100px) {
             padding: .5rem .5rem;

index_designerList.html

@@ -95,10 +95,10 @@
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                       <li class="nav-item">
-                        <a class="nav-link" target="_blank" href="https://m.hhh.com.tw/about/calculator/">估預算</a>
+                        <a class="nav-link" style="color: #ee7800;" target="_blank" href="https://m.hhh.com.tw/about/calculator/">估預算</a>
                       </li>
                       <li class="nav-item">
-                        <a class="nav-link" href="https://m.hhh.com.tw/photos/index/">找風格</a>
+                        <a class="nav-link" style="color: #ee7800;" href="https://m.hhh.com.tw/photos/index/">找風格</a>
                         <div class="dropbox">
                           <div class="container stylebox" style="max-width: 650px;">
                             <div class="row g-0 px-5">
@@ -309,7 +309,7 @@
                               <div class="col-5">
                                 <ul class="mx-auto mb-lg-0">
                                   <li class="dropbox-item mb-4">
-                                    <a class="dropbox-link dropbox-btn" target="_blank" href="https://m.hhh.com.tw/decoquery/lists/address/">查證照</a>
+                                    <!-- <a class="dropbox-link dropbox-btn" target="_blank" href="https://m.hhh.com.tw/decoquery/lists/address/">查證照</a> -->
                                   </li>
                                 </ul>
                               </div>
@@ -1124,7 +1124,7 @@
                     <span class="likeSee__sort">最新</span>
                   </div>
                   <aside class="nav-collapse-fixed" id="nav-collapse">
-                    <ul class="nav d-flex nav-collpase flex-wrap pill-aside" id="pills-tab" role="tablist">
+                    <ul class="nav d-flex nav-collpase flex-wrap pill-aside scroll-nav-collapse" id="pills-tab" role="tablist">
                       <!-- <li class="nav-item active p-0" role="presentation">
                         <a class="nav-item-link nav-item-active bg-transparent active" id="pills-intro-tab"
                         data-bs-toggle="pill" data-bs-target="#pills-intro" type="button" role="tab"

index_designerList_mb.html

@@ -561,7 +561,7 @@
       <div class="row gx-2 ps-1 pe-2">
         <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/request/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/40a8bf5.svg" alt=""></a></div>
         <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/about/calculator/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/170ebf4.svg" alt=""></a></div>
-        <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div>
+        <!-- <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/479aa61.svg" alt=""></a></div> -->
         <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/program/" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/dc6b655.svg" alt=""></a></div>
         <div class="fixed_menu__box col"><a href="https://m.hhh.com.tw/login/index" target="_blank"><img src="https://m.hhh.com.tw/_nuxt/img/76749fd.svg" alt=""></a></div>
       </div>
@@ -653,7 +653,7 @@
                   <hr>
                   <li class="nav-item"><a class="dropdown-item nav-link" href="https://hhh.com.tw/event170427/" target="_blank">老屋翻新</a></li>
                   <hr>
-                  <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank">查証照</a></li>
+                  <!-- <li class="nav-item"><a class="dropdown-item nav-link" href="https://m.hhh.com.tw/decoquery/lists/address/" target="_blank">查証照</a></li> -->
                 </ul>
               </li>
               <hr>

js/index-list.js

@@ -1,15 +1,44 @@
-let over = document.querySelector('.infoContent .tab-content').offsetHeight+200;
+// let over = document.querySelector('.infoContent .tab-content').offsetHeight+600;
+const navCollapse = document.querySelector('#nav-collapse');
+const navCollapse2 = document.querySelector('.scroll-nav-collapse');
+
+if (screen.width < 600) {
+    // window.location.href = `./index_designerList.html?cid=${cid}`;
+    let over = document.querySelector('.infoContent .tab-content').offsetHeight+500;
+    function fixedOnOver() {
+        if(window.pageYOffset >= over){
+          navCollapse.classList.add('sticky');
+      
+        } else {
+          navCollapse.classList.remove('sticky');
+        }
+    }
+  }
+  else{
+    let over = document.querySelector('.infoContent .tab-content').offsetHeight+600;
+    function fixedOnOver() {
+        if(window.pageYOffset >= over){
+          navCollapse.classList.add('sticky');
+          navCollapse2.classList.add('pt-5')
+        } else {
+          navCollapse.classList.remove('sticky');
+          navCollapse2.classList.remove('pt-5')
+        }
+    }
+
+  }
 window.addEventListener('scroll', fixedOnOver);
     
-const navCollapse = document.querySelector('#nav-collapse');
+
     
-function fixedOnOver() {
-    if(window.pageYOffset >= over){
-      navCollapse.classList.add('sticky');
-    } else {
-      navCollapse.classList.remove('sticky');
-    }
-}
+// function fixedOnOver() {
+//     if(window.pageYOffset >= over){
+//       navCollapse.classList.add('sticky');
+//     } else {
+//       navCollapse.classList.remove('sticky');
+//     }
+// }
+
 
 function scrollTest() {
   let page = 2;