Grow your CSS skills. Land your dream job.

Cannot hide link in responsive layout.

  • # March 12, 2013 at 5:56 pm

    Hello. This is my very first website and I’m having a bit of trouble.

    Here’s the site.
    http://dhana-jordan.appspot.com/index.html

    It’s just a student website for my mom. The problem I have is that I can’t hide the “Close” link at the top right. It’s purpose is to close the dropdown nav for small screens. I set it in the id= “back”. When I try to alter it in anyway it doesn’t do anything at all. Does anybody have any ideas?

    # March 12, 2013 at 6:06 pm

    Try this in your “tablet and up” media query / breakpoint

    #back a { display: none; }

    # March 12, 2013 at 6:57 pm

    No luck, #back or #back a is not responding to anything I do to it. Here’s my css for #back:

    #back {
    /* establish a positioning context for the closer */
    position: relative;

    }
    #back a {
    /* turn the link into a ghost */
    background: transparent;
    border: 0;
    text-indent: -999em;
    /* make it fill the screen */
    position: absolute;
    top: -101em;
    bottom: -101em;
    left: 0;
    right: 0;
    /* ensure it sits behind the other links */
    z-index: 0;
    }

    I got this code from a tutorial. When I delete all of this code, it changes nothing. So I’m guessing it’s inheriting something that I can’t figure out how to change.

    # March 12, 2013 at 7:17 pm

    you’ve placed the hashtag in the html id attribute – it should only be in the css

    # March 12, 2013 at 7:36 pm

    > Thank you so much! :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".