Help With CSS code for Responsive Website

Doing my first hand coded responsive website and need help with the menu.

http://markwardtenterprises.com/metest.html

When looking at the website on a mobile device or when downsizing it on a computer I want just the 3 horizontal lines to show and my code forces the Home link to remain on the screen. I have limited CSS knowledge but am learning. I am pretty sure this is the code that causes Home to be there as I have fiddled with it but not sure how to change it so that Home doesn't show on mobile devices.

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
.topnav a:notfirst-child) {display: none;} /* a:not ( :first-child) - no spaces */
.topnav a.icon {
float: right;
display: block;
}
}


Any help is appreciated. I am probably going to be back with more questions one page/problem at a time. I have been researching every issue I am dealing with. Thanks in advance,

Maria

 

Right now you have:

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

Code (CSS):

Remove

:not(:first-child)

Code (CSS):

so that you have:

@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

Code (CSS):

 

Thanks maxt1967. That worked. I knew I had to delete something and tried different things. I purchased a CSS book tonight on eBay.