Mobile Nav Menu clicked color

On my site I’m developing of hcldesign.co.uk I have a menu that shows when the screen is of a mobile size. Now I Have coded the nav bar so when the screen is under a certain size the :hover effect on the nav bar does not get used. I also have the color of when I click a navbar menu change to a blue color using :focus.

Now when I am in a web browser on my PC and within the mobile view in the WordPress customizer this functionality works fine… But when I go on my phone or tablet this CSS does not work the same as when I use it on a web browser showing the mobile site (moving the window to a phone like size)

So this is really annoying me as I’m not too sure what I need to do here and why it won’t work?

My code is below and you can also see it at hcldesign.co.uk (in development)

#menu-primary-menu a:hover {
	color: #fff;
}

#menu-primary-menu .active a {
  color: #3588dc;
}

#menu-primary-menu a:focus {
  color: #3588dc!important;
}

@media screen and (min-width: 1000px) {
#menu-primary-menu a:hover:before,
#menu-primary-menu .current a:before,
#menu-primary-menu a:hover:after,
#menu-primary-menu .current a:after
 {
  width: 100%;
}
}

#menu-primary-menu a {
font-size: 14px;
margin: -10px
}

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