AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of David Schure
David Schure
 asked on

Mobile Menu Going Bonkers

I'm getting a space at the top of the mobile menu that I am not getting on the desktop.laptop.
Also the menu items are either up too high (portrait) or way down (landscape) I can't find this style   <!-- START CELL MENU SECTION -------------------------------------------------------------------------->
    <div class="nav-menu nav-demo-1">
https://arise.plus
   <header class="navbar navbar-default navbar-static-top">
      <!--Client Header-->
      <!-- start: NAVBAR HEADER -->
      <div class="navbar-header">
         <a href="#" class="sidebar-mobile-toggler pull-left hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
            <i class="ti-align-justify"></i>
         </a>
         <a class="navbar-brand" href="#">
            <img src="/resources/images/Logos/Navbar45.png" width="106px" height="45px">
         </a>
         <a href="#" class="sidebar-toggler pull-right visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
            <i class="ti-align-justify"></i>
         </a>
         <a class="pull-right menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <i class="ti-view-grid"></i>
         </a>
      </div>
      <!-- end: NAVBAR HEADER -->
      <!-- start: NAVBAR COLLAPSE -->
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-right">
            <!-- start: MESSAGES DROPDOWN -->
               <li style="padding-top:2% ">
               <h2>Arise</h2>
            </li>
            <li class="dropdown current-user">
               <a href class="dropdown-toggle" data-toggle="dropdown">
                  <img src=<?php echo "'../AVATAR/images/".$_SESSION[SESSION_AVATAR]."'"; ?> > <span class="username" style="margin-top: 10px;">
                     <?php echo $username?>
                     <!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
                     <div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
                        <div class="arrow-left"></div>
                        <div class="arrow-right"></div>
                     </div>
                     <!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
                  </div>
               </a>
            </li>
         </ul>
      </div>
   </header>

Open in new window


Also a gap between logo and menu items on the portrait mode.  
CSS
Avatar of undefined
Last Comment
David Schure
8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
David H.H.Lee
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
David Schure
ASKER
Hi David. Tried that but it seems to be at the top of every page when you go into mobile mode.  The second you click on the hamburger you can see the white line appearing. Here is the code for a regular page.

<section id="header">
    <!-- START CELL MENU SECTION -------------------------------------------------------------------------->
    <div class="nav-menu nav-demo-1">
        <!-- NAV BAR BACKGROUND IMAGE-->
        <div class="bg_image" ><img src="resources/images/TripleDark.png" alt="Home"></div>
        <!-- START CELL NAV BAR------------------------------------------------------------------------------>
        <ul class="nav flex-column section">
            <li class="nav-item"><a class="nav-link active" href="index.php">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="About-Us.php">About Us</a></li>
            <li class="nav-item"><a class="nav-link" href="How-It-Works.php">How It Works</a></li>
            <li class="nav-item"><a class="nav-link" href="FAQS.php">Faqs</a></li>
            <li class="nav-item"><a class="nav-link" href="Join-Us.php">Join Us</a></li>
            <!--li class="nav-item"><a class="log" href="javascript:void(0)" data-toggle="modal" data-target="#Login">Log In</a></li-->
        </ul>
        <!-- END CELLNAV BAR--------------------------------------------------------------------------------->
    </div>
    <!-- END CELL MENU SECTION ------------------------------------------------------------------------------>
   
    <!-- HEADER BACKGROUND IMAGE  -->
    <div class="bg_image"><img src="resources/images/TripleDark.png" alt="About Us"></div>
    <!--HEADER BACKGROUND IMAGE -->
    <!--div class="overly"></div-->
    <!--START LAPTOP MENU SECTION------------------------------------------------------------------------------>
    <div class="header-continer">
        <div class="section">
            <!-- LOGO -->
            <div class="logo"><a href="index.php"><img src="resources/images/Logos/Lowsun2.png" alt="Logo"></a></div>
            <div class="nav-menu nav-demo-2">
                <!-- START NAV BAR-->
                <ul class="nav flex-column">
                    <li class="nav-item"><a class="nav-link active" href="index.php">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="About-Us.php">About Us</a></li>
                    <li class="nav-item"><a class="nav-link" href="How-It-Works.php">How It Works</a></li>
                    <li class="nav-item"><a class="nav-link" href="FAQS.php">Faqs</a></li>
                    <li class="nav-item"><a class="nav-link btn btn-primary" href="Join-Us.php">Join</a></li>
                    <li class="nav-item"><a class="nav-link btn btn-primary" href="#" data-toggle="modal" data-target="#Login">Log In</a></li>
                 </ul>
                <!-- END NAV BAR-->
            </div>
            <div class="header_items">
                <div class="menu_icon">
                <i class="fa fa-bars" aria-hidden="true"></i>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15.642 15.642" enable-background="new 0 0 15.642 15.642" width="21" height="21">
                        <path fill-rule="evenodd" d="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z" fill="#FFFFFF"/>
                </svg>
                </div>
            </div>
        </div>
    </div>

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent