SharePoint 2010 top nav problem on touch devices

You may have noticed that the out of the box SP2010 site nav is not quite usable on a touch screen device like an iPad. The top nav is a list of links, to put it simply. When the links are hovered on, with a mouse, a fly-out menu appears. Since touch devices do not have “hover” the fly-out menu does not appear until the item is clicked. But a click takes you to the target URL of the link so you are unable to choose a link from the fly-out nav.
I have provided the CSS below that fixes the problem. The solution is to create some padding on the right with an arrow where a touch/click can occur that is not a click on the link. While a click on the word on the left is still a click on the link and will take you to the target URL.

This CSS will fix that:

/*makes the menu wrap correctly*/
.s4-tn .menu-horizontal ul.root.static {
    display: block;
    white-space: normal;
    zoom:1;
}
/*helps with making the menu wrap*/
.s4-tn .menu-horizontal ul.root.static:after {
    content:".";
    display:block;
    clear:both;
    height:0;
    font-size:0;
    line-height:0;
}
/*sets the styling for every nav item*/
.s4-tn li.static{
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 5px 5px 5px 5px;
    margin:2px 0 2px 10px;
    padding: 2px 0;
}
/*resets the styling for the first item*/
.s4-tn .root > li.static{
    padding:2px 0;
    background-image:none;
    background-color:transparent;
    border:0 none;
    border-radius:0;
    margin:00;
}
/*adds the distance on the right and the custom arrow image*/
.s4-tn li.static.dynamic-children{
    background-image: url("/Style%20Library/menudown.gif");
    background-position: right center;
    background-repeat: no-repeat;
    padding: 2px 35px 2px 1px;
    position:relative;
}
/*padding for all top anchors*/
.s4-tn li.static > .menu-item {
    padding: 0 10px;
    border:0 none;
}
/*border to separate link from arrow*/
.s4-tn li.static.dynamic-children > .menu-item {
    border-right:1px solid #999;
}
/*resets for the first anchor*/
.s4-tn .root > li.static > .menu-item {
    padding: 2px 10px;
    margin:2px 0 2px 10px;
    border:0 none;
    background-color:#eee;
    border: 1px solid #ccc;
    border-radius: 5px 5px 5px 5px;
}
/*cancel the styling of selected anchors*/
.s4-toplinks .s4-tn a.selected {
    background: transparent none;
    border-color: transparent;
    margin:0;
}
/*cancel the default arrow and padding*/
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children span.additional-background {
    background-image:none;
    padding-right: 0;
}

Build an AI-First Enterprise

From early pilots to enterprise-wide deployment, our award-winning AI consulting and technical services help you build the right foundation, scale responsibly, and deliver meaningful business outcomes.

Learn More

Just copy and paste the CSS into your custom css file.

Did you get the picture?

The new arrow image can be downloaded from this location:
https://blogs.perficient.com/files/2012/06/menudown.gif
Be sure to put it in the same location that the CSS points to or modify the location in the CSS.