0
votes

I am using Umbraco 6 for MVC. My problem arises in my Navigation. It works as expected except on mobile devices. The navigation is modeled after the one seen here: http://htmlstream.com/unify/

On Mobile Devices, the dropdown sub nav links don't navigate to any other pages. When you expand a nav element with subpages and touch a sub nav link, it simply closes the dropdown.

I generate the navigation using a Razor partial view for each of the pages. It will start at the root and loop through creating a link for each visible node one level under the root. Upon reaching a node that has child nodes, the razor script will create sub nav items before moving along. This leaves me with a nice collapsible dropdown navigation that translates well to mobile devices.

The Urls for each of the nodes whether it is a main nav element or a sub nav element, are created in the foreach loop using @var.NiceUrl()

Perhaps this causes a problem but I can't figure out why all of the other links, whether on the main navigation or as buttons throughout the page, would work fine despite being created with the same .NiceUrl() method.

Anyone have any insight?

1
I'm not sure that this is an Umbraco, MVC or Razor issue. It sounds more likely a CSS or javascript issue.Digbyswift
I'm starting to think that the touch event is being stolen by the dropdown toggle instead of being used on the sub nav link. So instead of touching a link, the device interprets it as the user just toggling the dropdown menu instead...No idea how to fix it thoughFieldzy00
I would delete this question, and post a new one with an example your nav markup, and also the CSS. Since this probably isn't specifically Umbraco, MVC or Razor, don't mention them as they'll confuse people, and also tag the question with "CSS" etc. You'll get a much better response thenDigbyswift

1 Answers

0
votes

Please try to add the following code, in your style sheet:

.dropdown-backdrop 
{
      position: static;
}