Skip to main content
Measha06
Measha06
Known Participant
June 15, 2017
Question

Mobile Menu Not Working Fully

  • June 15, 2017
  • 1 reply
  • 5042 views

I have used a Bootstrap nav bar with a drop down menu at the right and have included a sub menu this all works fine until I get to the breakpoint for a mobile phone. The hamburger works fine, the drop down menu works fine and changes to a slider to access all menu items but when I click on the arrow to the right for the submenu it closes the section down. Presumably as there is no where to the right to push the sub menu out to. Please can you tell me how to fix this issue.

http://addesignandprint.co.uk/Test/celebrations.html

I have only started the addition of the sub menu on this one page and not adding to others until I have it working on one page!

I would appreciate help in this matter

Liz

This topic has been closed for replies.

1 reply

O
osgood_
Legend
June 15, 2017

Seems to be working as it should do when I look at it. A sub-menu of 'Celebration Stationery' opens up BENEATH the category title.

Personally I think the Bootstrap responsive nav is a poor solution because it truncates the menu at a specific height and you can miss whats 'concealed' unless you watch the vertical scroll bar carefully.

Measha06
Measha06Author
Known Participant
June 15, 2017

If you go down the list as you say it opens a list under Celebration Stationery and then at the bottom it says Make Your Choices which then opens out to the right and should give 5 more options starting with Card bases and finishing at the moment on font choices.

How would you suggest?

Liz

Measha06
Measha06Author
Known Participant
June 15, 2017

I have made some changes to the navbar. Please replace all from <nav class="navbar navbar-default navbar-fixed-top"> to and including </nav> with the following

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="topFixedNavbar1">
  <ul class="nav navbar-nav navbar-right">
  <li><a href="index.html">Home</a></li>
  <li><a href="contact-us.html">Contact Us</a></li>
  <li><a href="business-stationery.html">Corporate</a></li>
  <li><a href="embroidery.html">Embroidery</a></li>
  <li><a href="everything-web.html">Everything Web</a></li>
  <li><a href="self-publishing.html">Self-Publishing</a></li>
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Celebration Stationery <span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="celebrations.html">Celebrations</a></li>
  <li><a href="wed-stationery-items.html">Wedding Stationery Items</a></li>
  <li role="separator" class="divider"></li>
  <li><a href="faq.html">FAQ</a></li>
  <li role="separator" class="divider"></li>
  <li class="dropdown-submenu pull-left"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Make Your Choices</a>
  <ul class="dropdown-menu">
  <li><a href="cardbases.html">Base Choices</a></li>
  <li><a href="#">Card Choices</a></li>
  <li><a href="#">Accessorie Choices</a></li>
  <li><a href="#">Wedding Wording</a></li>
  <li><a href="#">Font Choices</a></li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </div>
  <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>

I have removed superfluous code and added a pull-left to make the dropdown go to the left.

Change the style rules that I gave you above to

@media (max-width: 767px) {
   .navbar-collapse {
       max-height: 620px !important;
       overflow-x: auto;
   }
}

Now you will notice that the scrollbar has disappeared for mobile users, but the effect that is worrying you still remains. The reason for this is because you are staying on the same page. Once you have linked the menu item to another page, the menubar will revert to the closed position on the new page.

I hope that helps.


I have tried that in place and its brilliant my only concern is that not having linked anything to 'make your choices' people in mobile view might not rollover it on to the next to discover the rest but in the other sizes it is just what I was trying all last night to do on my own and not getting there as not a coder. I haven't linked anything to Celebration Stationery but it works differently.

Do you have any suggestions for improvement in this area?

I assume that I need to replace the code in each and every page.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices