Mobile site links go static

This question has been troubling me for a while now. I have my normal website, which has a navigation bar that runs a long the top. In the navigation bar, there are four text links which work fine. In my mobile site, these links which to icons. However, when this happens, the links do not work (there is no hover color change as set to have or anything). The website can be seen here, feel free to see the problems for yourselves.

Here is my HTML code for my navigation bar:

<ul id="navbar">
            <li id="home"><h4><a href="./"><span class="navtext">Home</span><span class="navicon" data-icon="&#xe000;" aria-hidden="true"></span></a></h4></li>
            <li id="resume"><h4><a href="./resume/"><span class="navtext">Résumé</span><span class="navicon" data-icon="&#xe004;" aria-hidden="true"></span></a></h4></li>
            <li id="projects"><h4><a href="./projects/"><span class="navtext">Projects</span><span class="navicon" data-icon="&#xe003;" aria-hidden="true"></span></a></h4></li>
            <li id="files"><h4><a href="./files/"><span class="navtext">Files</span><span class="navicon" data-icon="&#xe001;" aria-hidden="true"></span></a></h4></li>
</ul>

And here is my CSS for the navigation bar:

#navbar {
width: 100%;
margin-top: 40px;}

#navbar li { 
display: inline;
position: relative;
width: 25%;
float: left;
text-align: center;
margin-bottom: 30px;
padding: 0;}

#navbar li a {
color: #0F0F0F;}

#home a:hover, a:focus {
color: #F28627;}

#hrhome {
border: solid #F28627;
border-width: 1px;
margin-bottom: 15px;}

#resume a:hover, a:focus {
color: #FC3C37;}

#hrresume {
border: solid #FC3C37;
border-width: 1px;
margin-bottom: 15px;}

#files a:hover, a:focus {
color: #8800B5;}

#hrfiles {
border: solid #8800B5;
border-width: 1px;
margin-bottom: 15px;}

#projects a:hover, a:focus {
color: #ED1F8D;}

#hrprojects {
border: solid #ED1F8D;
border-width: 1px;
margin-bottom: 15px;}

.navicon {visibility: hidden;}

@media only screen and (max-width: 767px) {
.navicon {
    visibility: visible;
    display: inline;
}
.navtext {
    display: none;}}

Sorry for such long code. I'm quite sure that the problems will be to do with some sort of class or id of a <div> and the media query for mobile screen sizes. What do I need to change so that the buttons work on mobile screens?

By the way, the buttons work fine on a Chrome (or other internet browser) that has been resized; it is only on a mobile device (phone, tablet) that the problem occurs. Thanks in advance for any answers.

Solution

Links don't work in Dolphin Browser, but they work on Firefox and Chrome - Android 4.1 (hover works on click, but it's normal for touch screen).

Change .navicon to display: inline-block; - it's a fix for clickability issue in WebKit.