Mouse over/hover customization works on desktop, not on mobile

Hi,

Tried to use additional CSS to customize the main menu, would want some mouse over functionality. I’m working with a child theme of Sydney, and didn’t modify the actual code of the theme, only additional CSS. Added following:

ul li {display:block;}
ul li:hover{background: #677590;}

In WordPress preview it works perfectly, but with a real phone and a tab, it works very strangely: it works in about half of the cliques… a couple of times the block and the colour changes, then next 2-3 cliques the link appearance doesn’t chance at all even though the link works (goes to the page). Also tried adding “important” – didn’t work either. On desktop it works.

I looked at the actual code with Firebug (copied it below), it seems really like a mess to me (look especially after “autoptim…0537c.css”). So happy to get any help, just pulling my hair off here :/

#mainnav ul li a {
  font-size:18px;
}
autoptim...0537c.css
#mainnav ul li a {
  float:left;
}
autoptim...0537c.css
#mainnav ul li a {
  color:#FFFFFF;
  display:block;
  font-family:Raleway, sans-serif;
  font-size:14px;
  font-weight:500;
  outline:none;
  position:relative;
  text-decoration:none;
}
autoptim...0537c.css
a {
  color:#D65050;
}
autoptim...0537c.css
a {
  text-decoration:none;
  transition:all 0.3s ease-in-out 0s;
}
autoptim...0537c.css
a {
  color:#337AB7;
  text-decoration:none;
}
autoptim...0537c.css
a {
  background-color:transparent;
}
autoptim...0537c.css
#mainnav ul li a, #mainnav ul li::before {
  color:#FFFFFF;
}
autoptim...0537c.css
.widget-area .widget_fp_social a, #mainnav ul li a:hover, .sydney_contact_info_widget span, .roll-team .team-content .name, .roll-team .team-item .team-pop .team-social li:hover a, .roll-infomation li.address::before, .roll-infomation li.phone::before, .roll-infomation li.email::before, .roll-testimonials .name, .roll-button.border, .roll-button:hover, .roll-icon-list .icon i, .roll-icon-list .content h3 a:hover, .roll-icon-box.white .content h3 a, .roll-icon-box .icon i, .roll-icon-box .content h3 a:hover, .switcher-container .switcher-icon a:focus, .go-top:hover, .hentry .meta-post a:hover, #mainnav > ul > li > a.active, #mainnav > ul > li > a:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .text-color, .social-menu-widget a, .social-menu-widget a:hover, .archive .team-social li a, a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .classic-alt .meta-post a, .single .hentry .meta-post a {
  color:#677590;
}
autoptim...0537c.css
*, ::before, ::after {
  box-sizing:border-box;
}
autoptim...0537c.css
*, ::after, ::before {
  box-sizing:border-box;
}
autoptim...0537c.css
Inherited fromul#menu-ks-future-invest-valikko.menu
#mainnav ul {
  list-style:none;
}
autoptim...0537c.css
Inherited frombody.home
body {
  color:#000000;
}
autoptim...0537c.css
body {
  font-size:16px;
}
autoptim...0537c.css
body {
  color:#767676;
  font:14px/1.7 "Source Sans Pro", sans-serif;
}
autoptim...0537c.css
body {
  color:#333333;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:14px;
  line-height:1.42857;
}
autoptim...0537c.css
Inherited fromhtml
html {
  font-size:10px;
}
autoptim...0537c.css
html {
  font-family:sans-serif;
}
autoptim...0537c.css

The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions. more…

• This topic was modified 5 years, 3 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Developing with WordPress topic

The page I need help with: [log in to see the link]