मोबाइल ड्रॉप डाउन नेविगेशन

Question

में स्क्रॉल नहीं कर सकता है मुझे मोबाइल मेनू परिदृश्य के साथ कुछ परेशानी हो रही है, - मैं स्क्रॉल करने में असमर्थ हूं। स्क्रॉल करने से मुझे समझने के लिए मैं पूरे मेनू को देखता हूं। अब स्क्रॉल करते समय, यह निश्चित मात्रा में पीएक्स (हेडर की ऊंचाई) के बाद रुक जाता है। कृपया खिड़की को कम करें ताकि आप मोबाइल लैंडस्केप की तरह दिख सकें यदि आप स्वयं को देखना चाहते हैं।

जैसा कि छवि दिखाता है, आप पूरे मेनू को देखने में सक्षम नहीं हैं।

समस्या निम्नलिखित है:

header { 
     position: fixed; 
} 

यह ठीक किया जाना आवश्यक है, लेकिन मैं स्क्रॉल करने के लिए सक्षम होना चाहिए। कोई सुझाव?

मैंने समझने में आसान बनाने के लिए कोड के कुछ हिस्से को हटाने का प्रयास किया है।

एचटीएमएल

<header class="nav-down"> 
    <nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar"> 
       <section class="si-icons si-icons-default"> 
        <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span> 
       </section> 
      </button> 
      <div id="navbar-brand-cont"> 
       <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>"> 
        <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg"> 
       </a> 
      </div> 
     </div> 
     <div class="collapse navbar-collapse" id="Aarseth-Navbar"> 
      <ul class="nav navbar-nav"> 
       <?php wp_nav_menu(array('menu' => 'Hovedmeny', 'menu_class' => 'nav-menu')); ?> 
      </ul> 
     </div> 
    </nav> 
</header> 

सीएसएस

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 

.nav-up { 
    top: -120px; 
} 

.navbar-fixed-top { 
    position: absolute; 
} 

.nav-menu { 
    margin-top: 90px; 
    padding-bottom: 25px; 
} 


@media screen and (max-width: 767px) { 
    header { 
     height: 100px; 
    } 

    .site-navigation ul { 
     display: block; 
    } 
    #Aarseth-Navbar ul li { 
     clear: both; 
     margin-left: 0; 
     float: none; 
     display:block; 
     margin-top: 15px; 
     padding-bottom: 15px; 
    } 

    .navbar-collapse { 
     height: auto; 
     max-height:none; 
     margin-top: 20px; 
     padding-left: 0; 
     padding-right: 0; 
    } 

    #Aarseth-Navbar { 
     overflow: hidden; 
    } 

    .navbar-nav { 
     width: 100%;  
    } 

    .menu-hovedmeny-container { 
     padding-top: 0px; 
    } 

    .nav-menu { 
     padding-left: 0px; 
     padding-bottom: 0px; 
    } 

    .site-navigation ul { 
     width: 100%;  
    } 

    .menu-hovedmeny-container { 
     padding-right: 0px; 
    } 

    .navbar-brand { 
     padding-bottom: 0px;  
    } 
    .sub-menu { 
     display: block; 
     width: 100%; 
     position: relative; 
    } 

    .navbar-collapse { 
     max-height: none!important; 
    } 
} 

आप एक बार देख लेना चाहते हैं: http://goo.gl/GZaM5K

नोट: मैं अभी मेनू आइकन फिक्सिंग पर काम कर रहा हूँ , इसलिए यदि आप इसे नहीं देखते हैं, तो दाएं कोने पर दबाएं यह स्वाभाविक रूप से हैम्बर्गर/मेनू आइकन है। Href काम करता है, यह केवल svg है कि मुझे कुछ परेशानी हो रही है।

कृपया पूछें कि कुछ अस्पष्ट है या नहीं।

Answer 1

यदि आप अपने मोबाइल, ड्रॉप-डाउन नेविगेशन को स्क्रॉल करने योग्य चाहते हैं तो आपको height को रैपर div के साथ परिभाषित करना होगा जिसे आपने मोबाइल नेविगेशन को एन्सेज करने के लिए कोड किया था। आपको ऊंचाई निर्धारित करनी चाहिए, और आपको overflow-yscroll पर सेट करना चाहिए और साथ ही touch स्क्रॉल भी जोड़ना चाहिए।

#MobileMenuDivWrapper { 
    height: 200px; 
    max-height: 200px; 
    width: 100%; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling:touch; // mobile safari 
}