Ask your WordPress questions! Pay money and get answers fast! (more info)

css menus not working on mobile devices WordPress


There is a site on a temp domain here:

the menus fly out on desktop, on ipad and iphone they come out and stay out so they can be accessed.

But on blackberry they show up and then disappear before they can be accessed and on Samsung they apparently do not show at all.

I need a way to fix that on mobile devices that does not change the look of the menus.

This is the markup for the css.
part of the markup has been done by different people, attempting to fix it. there is a lot of commented code but below is the cleaned up version

/*hides the header text*/
.builder-module-sidebar h4.widget-title{ display: none; }

list-style-type: none;
/* removes the list style */
.widget_pages ul li {clear: both; /**float: left; */ position: relative; width: 100%;}

.widget_pages ul li:hover {font-weight:bold; background: none repeat scroll 0 0 #EEEEEE !important;}

.widget_pages ul li a {color: #000000 !important; display: block; font-size: 12px; padding: 6px 20px;
text-decoration: none;}

.widget_pages ul li .children { display: none; position: absolute; right: 100%; top: 0;
width: 245px; z-index: 99999;}

.widget_pages ul li:hover > .children { display: block; }

.widget_pages ul li .children li {border-bottom: 2px solid #000000;}

.widget-wrapper-2 { margin: 0; }

.widget_pages .page-item-20, .widget_pages .page-item-20 .children li{ background-color: #ff7831; }
.widget_pages .page-item-2, .widget_pages .page-item-2 .children li{background-color: #d12028; }
.widget_pages .page-item-22, .widget_pages .page-item-22 .children li{background-color: green; }
.widget_pages .page-item-24, .widget_pages .page-item-24 .children li{background-color: #fde500; }
.widget_pages .page-item-42, .widget_pages .page-item-42 .children li{background-color: #CF0; }
.widget_pages .page-item-34, .widget_pages .page-item-34 .children li{background-color: pink; }
.widget_pages .page-item-2801, .widget_pages .page-item-2801 .children li{background-color: blue; }

.child_nav_arrow {

font-size: 22px;

left: 2px;

position: absolute;

top: 1px;


Answers (0)

No answers yet.