行動版修正

index.html

@@ -18,14 +18,14 @@
    
     <!-- 主選單 -->
     <section id="Navigation" class="container-fluid mx-0 px-0">
-        <div style="position: fixed; z-index: 20;">
+       
             <!-- <section class="courseadv" style="background: #fff;" class="course-adv px-0 mx-0">
                 <div class="row">
                     <div class="col-lg-11"> <p class="text-center">爱学习折扣| 购买课程最低仅需 NT$330，可以获得折扣课程的最后一天。仅剩 9 小时 51 分钟 29 秒。</p></div>
                     <div class="col-lg-1"><img  class="close-adv" width="16px" src="./img/close2.png" alt=""></div>
                 </div>
             </section> -->
-            <div id="nav" class="row" style="width: 100vw; background:rgba(41, 36, 33, 0.9); color:#fff">
+            <div id="nav" class="row">
                 <div id="logo" class=" col-md-2 col-lg-2">
                     <a style="color:#fff ;text-decoration: none;" href="./index.html"><h1>Opentalk</h1></a>
                 </div>
@@ -39,46 +39,39 @@
                 </div>
                 <img id="menu-btn1" src="./img/menu.png" alt="">
             </div>
-
-        </div>
-        <section id="banner" class="container-fluid px-0 mx-0">
-    
-            <div class="row mx-0">
-                <div class="form col-12 order-2 col-lg-5 order-lg-2">
-                    <form class="email-sub" action="">
-                        <h1>TODAY'S THE DAY</h1>
-                        <h4>歡迎訂閱掌握最新課程資訊</h4>
-                        <!-- <h2>歡迎訂閱掌握最新課程資訊</h2> -->
-                        
-                        <div class="email-form mt-3" style="margin: 0 auto;">
-                            <div style="text-align: center;">
-                                <input type="email" id="email" name="email" placeholder="請留下您的Email" required>
-                            </div>
-                           
-                            <span class="course-tab" for="name">選擇您有興趣的課程類別(可複選)</span>
-                            <label for="20" class="selector1">直播講堂<input type="checkbox" class="selecbox ms-1" id="20" name="tags" value="20" style="width:15px;height:15px;"></label>
-                            <label for="18" class="selector1">個人成長<input type="checkbox" class="selecbox ms-1" id="18" name="tags" value="18"  style="width:15px;height:15px;"></label>
-                            <label for="16" class="selector1">變美課程<input type="checkbox" class="selecbox ms-1" id="16" name="tags" value="16" style="width:15px;height:15px;"></label>
-                            <label for="21" class="selector1">專業影像<input type="checkbox" class="selecbox ms-1" id="21" name="tags" value="21" style="width:15px;height:15px;"></label>
-                            <label for="22" class="selector1">管理營銷<input type="checkbox" class="selecbox ms-1" id="22" name="tags" value="22" style="width:15px;height:15px;"></label>
-                            <label for="15" class="selector1">享受生活<input type="checkbox" class="selecbox ms-1" id="15" name="tags" value="15" style="width:15px;height:15px;"></label>
-                          
-                            <input class="email-subbtn my-3 " style="opacity: 1;" type="submit" value="立即訂閱">
-                         
-                            
+    </section>
+    <section id="banner" class="container-fluid px-0 mx-0">
+        <div class="row mx-0">
+            <div class="form col-12 order-2 col-lg-5 order-lg-2">
+                <form class="email-sub" action="">
+                    <h1>TODAY'S THE DAY</h1>
+                    <h4>歡迎訂閱掌握最新課程資訊</h4>
+                    <div class="email-form mt-3" style="margin: 0 auto;">
+                        <div style="text-align: center;">
+                            <input type="email" id="email" name="email" placeholder="請留下您的Email" required>
                         </div>
-                       
-                    </form>
-                </div>
-                <div class="secbanner col-12 order-1 col-lg-7 order-lg-2 d-flex align-items-center">
-                    <div  id="banner-container">
-                        <img class="" src="./img/banner-test/bruce-mars-xj8qrWvuOEs-unsplash2.jpg" alt="">
+                        <span class="course-tab" for="name">選擇您有興趣的課程類別(可複選)</span>
+                        <label for="20" class="selector1">直播講堂<input type="checkbox" class="selecbox ms-1" id="20" name="tags" value="20" style="width:15px;height:15px;"></label>
+                        <label for="18" class="selector1">個人成長<input type="checkbox" class="selecbox ms-1" id="18" name="tags" value="18"  style="width:15px;height:15px;"></label>
+                        <label for="16" class="selector1">變美課程<input type="checkbox" class="selecbox ms-1" id="16" name="tags" value="16" style="width:15px;height:15px;"></label>
+                        <label for="21" class="selector1">專業影像<input type="checkbox" class="selecbox ms-1" id="21" name="tags" value="21" style="width:15px;height:15px;"></label>
+                        <label for="22" class="selector1">管理營銷<input type="checkbox" class="selecbox ms-1" id="22" name="tags" value="22" style="width:15px;height:15px;"></label>
+                        <label for="15" class="selector1">享受生活<input type="checkbox" class="selecbox ms-1" id="15" name="tags" value="15" style="width:15px;height:15px;"></label>
+                      
+                        <input class="email-subbtn my-3 " style="opacity: 1;" type="submit" value="立即訂閱">
+                     
+                        
                     </div>
+                   
+                </form>
+            </div>
+            <div class="secbanner col-12 order-1 col-lg-7 order-lg-2 d-flex align-items-center">
+                <div  id="banner-container">
+                    <img class="" src="./img/banner-test/bruce-mars-xj8qrWvuOEs-unsplash2.jpg" alt="">
                 </div>
             </div>
-        </section>
+        </div>
     </section>
-
     <!-- 手機板行動選單 -->
     <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
         <div id="menu-box2">
@@ -100,7 +93,6 @@
             <hr>
 
         </div>
-
     </div>
    
     <!-- 最新課程  電腦版-->

style.css

@@ -14,10 +14,6 @@
   font-display: swap;
 }
 
-body {
-  position: relative;
-}
-
 body .secn-title {
   font-family: 'Noto Serif TC', serif;
   text-align: left;
@@ -62,8 +58,11 @@ body .line {
 }
 
 #Navigation {
-  position: relative;
   width: 100vw;
+  position: fixed;
+  z-index: 20;
+  background: rgba(41, 36, 33, 0.9);
+  color: #fff;
 }
 
 #Navigation #logo {
@@ -161,6 +160,7 @@ body .line {
   width: 40vw;
   right: 0px;
   position: fixed;
+  top: 0px;
   z-index: 20;
   overflow: hidden;
   display: none;
@@ -221,6 +221,12 @@ body .line {
   background: #000;
 }
 
+@media screen and (max-width: 767px) {
+  #banner {
+    margin-top: 70px;
+  }
+}
+
 #banner .form {
   padding-top: 5vw;
   background: #000;

style.scss

@@ -21,7 +21,7 @@ $subcolor: #9400d3;
 @media screen and(max-width:$moblie) {
 }
 body {
-    position: relative;
+  
     .secn-title {
         font-family: 'Noto Serif TC', serif;
         text-align: left;
@@ -57,11 +57,11 @@ body {
 
 // 主選單
 #Navigation {
-    position: relative;
     width: 100vw;
-    // background-color: $navbgcolor;
-    // background: rgba(41, 36, 33, 0.9);
-   
+    position: fixed;
+     z-index: 20;
+     background:rgba(41, 36, 33, 0.9); 
+     color:#fff;
     #logo {
         padding-top: 2.5vw;
         @media screen and(max-width:$moblie) {
@@ -135,6 +135,7 @@ body {
     width: 40vw;
     right: 0px;
     position: fixed;
+    top: 0px;
     z-index: 20;
     overflow: hidden;
     display: none;
@@ -190,6 +191,9 @@ body {
     width: 100vw;
     display: inline-block;
     background: #000;
+    @media screen and(max-width:$moblie) {
+        margin-top: 70px;
+    }
     .form {
         padding-top: 5vw;
         background: #000;