One nav works, the other doesn&#x27;t

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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.

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...

so 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

ASKER

Thanks so much, and sorry it took a while to get back to you. I'll implement this later today!

ASKER

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

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!

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.

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

ASKER

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. :)

ASKER

I added the stylesheet to http://clinica-americas.com/nav-example.html - can you check to see if the dropdown works properly? Thanks!

Dropdown is not working on Android with Chrome browser.

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

ASKER

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

Still no dropdown. This is typical on Android which is why I recommend Smart Menus.

ASKER

OK, many thanks for putting up with my questions. I will look into Smart Menus. :)

ASKER

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

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

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

ASKER

I'm using bootstrap 3, thanks!