• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 47
  • Last Modified:

Mobile device does not display

The code executes just fine on my desktop browser, but the "Meetings" does not show on my mobile device so I am unable to click on anything.https://jsfiddle.net/Spleendrivel/mg3upjqh/
0
Dave McConnell
Asked:
Dave McConnell
  • 3
1 Solution
 
Leonidas DosasCommented:
To have a mobile nav menu on bootstrap the html code must have this structure:
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">   
    <div class="navbar-header">
     <ul class="nav navbar-nav navbar-left">
               <li class="menu-item dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="CloseAll();">Meetings</a>
                  <ul class="dropdown-menu">
                     <li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleMonMeetings();">Monday</a></li>
                     <li class="menu-item "><a class="dropdown-item" href="#" onclick="toggleTueMeetings();">Tuesday</a></li>
                     <li class="menu-item "><a class="dropdown-item" onclick="toggleCommitteeMeetings();" href="#">Committee Meetings</a></li>
                  </ul>
               </li>
            </ul>
    </div>   
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Open in new window

0
 
Dave McConnellRetiredAuthor Commented:
I should have included the header info, as it stands now I can display the header image with the menu underneath on my desktop, but not on the mobile phone.  Please note the use of bootstrap on the last line to create a nav bar that will display properly on all devices.

      <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <img src="images/HeaderImage.jpg" class="img-responsive">
         </div>
      </div>
      <div class="row">
         <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <H4><Strong>Need Help?</Strong>&nbsp;&nbsp;&nbsp;928-458-7488</H4>
         </div>
         <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
      </div>
      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
0
 
Dave McConnellRetiredAuthor Commented:
If you go to http://www.yavapaina.org and see the vertical menu, I am simply trying to move this to a more pleasing horizontal menu system with less clutter.

That is my final goal, hope that makes sense.
0
 
Dave McConnellRetiredAuthor Commented:
Actually closing this question.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now