1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help With CSS code for Responsive Website

Discussion in 'CSS' started by mariafgp, May 18, 2017.

  1. #1
    Doing my first hand coded responsive website and need help with the menu.
    SEMrush
    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:not:)first-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
     
    Solved! View solution.
    mariafgp, May 18, 2017 IP
    SEMrush
  2. #2
    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):
     
    maxt1967, May 19, 2017 IP
  3. mariafgp

    mariafgp Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Thanks maxt1967. That worked. I knew I had to delete something and tried different things. I purchased a CSS book tonight on eBay.
     
    mariafgp, May 19, 2017 IP