One nav works, the other doesn't

Hi, the navigation isn't working on my site, so I broke to down into two examples: http://clinica-americas.com/nav-example.html
That has code from bootstrap examples, I lost the custom stylesheet, and as far as I can tell it works.

http://clinica-americas.com/nav-example-2.html that has the code from our site, and I included back in the custom stylesheet.

What isn't working is the drop down. It works on large screens, but not on mobile. Please confirm that before starting to work on this.

I went through the code, and these are the differences:

Differences: 1 is nav-example, 2 is nav-example-2

1. <nav class="navbar navbar-default" role="navigation">
2.  <div class="navbar">

1.<div class="navbar-header">
2.  <div class="navbar-header" id="nav-head">

1.<button type="button" class="navbar-toggle" data-toggle="collapse"
         data-target="#example-navbar-collapse">
2. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

1.  <a class="navbar-brand" href="#">TutorialsPoint</a>

2. No brand class

1.<div class="collapse navbar-collapse" id="example-navbar-collapse">
2. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

1. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
2. <a href="#" class="dropdown-toggle" data-hover="dropdown" data-delay="250" data-close-others="false">

1.<li><a href="#">jmeter</a></li>
2. <li><a tabindex="-1" href="services-dr-noe.html">Cirugía/Laparoscopia</a></li>

I can't figure out why ours is not working. The differences just seem to be CSS-appearance based. Thanks for your help.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Randy DownsOWNERCommented:
Try smartMenus. It requires their javascript & the css directly after bootstrap.

Demo

<!-- Bootstrap core CSS -->
<link href="../libs/demo-assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Open in new window


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../libs/demo-assets/bootstrap/js/bootstrap.min.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery Bootstrap Addon -->
<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Mel,
I checked out your page links and here is what I believe is happening:

1) in below image, the menu is there in Mobile view (I have reduced the window size on desktop to emulate mobile view)  as you can see, the menu Icon is there but not visible due to the background image color.
menu present but visibility poor
2) Check this second image, I have added a background color to the menu in the second image... now it shows and the dropdown menu is visible when clicked on it...
adding background color makes the menu visibleso to solve your problem, just add below code to your custom CSS (I have used black as it suits your background image in example link... but you can use another color)

.navbar-toggle {
    background-color: #000;
} 

Open in new window


let me know if you have any questions.
thanks,
Prasadh
0
mel200Author Commented:
Thanks so much, and sorry it took a while to get back to you. I'll implement this later today!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author Commented:
HI, This is what I get when I go to a smaller window:

screenshot
So that is not really my problem. As I said, What isn't working is the drop down. It works on large screens, but not on mobile. Please confirm that before starting to work on this.

That is the issue.  Thanks. Randy Downs, I would rather not rebuild the menu if possible, I'd rather find out why this standard menu isn't working properly. But I will use that in future sites, thanks!
0
Randy DownsOWNERCommented:
It may be easier to change the menus than troubleshoot. How many pages do you have to change if you redo the menu?

My guess is that style sheet breaks it. Try adding your style sheet to the working one. Perhaps you have the same styles defined in multiple style sheets. You can also try changing the order of style sheets.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
HI Mel,
I checked your link on my mobile (Samsung Galaxy Tab 3 Neo) on Firefox and Chrome Browsers, the menu is working fine... I even tried to send a mail thru the mobile, but the page does not seem to work or process the email form.

the only thing i noticed is that the dropdown or submenus of the Services are not opening on Mobile, when clicked it is going to a page with 3 banners kind of things...

so let me know your views.

thanks,
Prasadh
0
mel200Author Commented:
hi, thanks to both of you. Randy, I'll check the stylesheet, good idea. About rebuilding the menu, the time would be spent on making it look identical, I think that would be the problem.

Prasadh, thanks- the dropdown not opening on mobile is actually the issue. My explanation was incorrect.  Sorry about that.  I just got back from vacation, then had an accident, so my memory of what was happening with this site aren't as clear as they should be. :)
0
mel200Author Commented:
I added the stylesheet to http://clinica-americas.com/nav-example.html - can you check to see if the dropdown works properly? Thanks!
0
Randy DownsOWNERCommented:
Dropdown is not working on Android with Chrome browser.
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
its fine..... happens sometimes :)

I checked the link on mobile and its working except the dropdown in 3rd menu item is not opening in mobile.

thanks,
Prasadh
0
mel200Author Commented:
Ok, thanks. I do want to double-check that it's the stylesheet which is breaking it. I've removed it again, can you confirm now that the dropdown works in mobile? Thanks.

http://clinica-americas.com/nav-example.html
0
Randy DownsOWNERCommented:
Still no dropdown. This is typical on Android which is why I recommend Smart Menus.
0
mel200Author Commented:
OK, many thanks for putting up with my questions. I will look into Smart Menus. :)
0
mel200Author Commented:
Hi, again. This seems to be discussing the same issue, but it is a little over my head. Does it apply here? https://github.com/twbs/bootstrap/issues/9543
0
Randy DownsOWNERCommented:
That's an old thread. You can try commenting this out if it exists in your bootstrap code but I would not advise it. The thread illustrates how long this Android problem has existed. The only reliable fix I have found is Smart Menus.

if ('ontouchstart' in document.documentElement) {
  // if mobile we we use a backdrop because click events don't delegate
  $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}

Open in new window

0
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Mel,
I agree with Randy and it will be a better option to use smart menu if there is a mentioned or documented problem with bootstrap. It will save time and you can follow up with the problem as a learning exercise later.
by the way which version of bootstrap you are using? I will try it out and see if it affects mobile drop down menus.

thanks,
Prasadh
0
mel200Author Commented:
I'm using bootstrap 3, thanks!
0
mel200Author Commented:
Thanks, I will use Smartmenus in future!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

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.