CODEWITHSUNDEEP
htmlcss
Jack H
Jack H

Reputation: 344

Make image show when screen reaches a certain width (pixels)

I have a hamburger icon that is set to "display: none;" and when i get to a certain width on the page i want it to appear again. How do i do this?

//// <-- HTML --> \\\\

    <section class="topMenu container row u-full-width">
    <section class="twelve columns center">
        <header>
            <ul class="topMenuList">
                <li><a href="index.html">Home</a></li>
                <li><a href="#MCSA">MCSA</a></li>
                <li><a href="#MCSE">MCSE</a></li>
                <li><a href="#MTA">MTA</a></li>
                <li><a href="#SQL">SQL</a></li>
                <li><a href="#Programming">Programming</a></li>
                <li><a href="#Office">Office</a></li>
                <li><a href="#DesktopSupport">Desktop Support</a></li>
                <li><a href="#Server">Server</a></li>
                <li><a href="#Classroom">Classroom</a></li>
                <li><a href="#FreeBrochure">Free e-Brochure</a></li>
                <li><a href="contact.html">FREEPHONE: 0800 677 1232</a></li>
            </ul>
            <a href="#"><div class="hamburger"></div></a>
        </header>
    </section>
</section>

//// <-- CSS --> \\\\

 .hamburger {
    display: none;
    content: url('../images/iconHamburger.png');
}


    @media only screen and (max-width: 850px) {
    header ul li a{
        display: none;
    }

.hamburger {
    content: url('../images/iconHamburger.png');
}

I am trying to create a menu that is responsive and when the screen is a certain size the menu will disappear and be replaced with a icon that will drop a menu down.

Upvotes: 1

Views: 983

Answers (2)

Jenti Dabhi
Jenti Dabhi

Reputation: 880

.hamburger {
    display: none;
    content: url('../images/iconHamburger.png');
}


    @media only screen and (max-width: 850px) {
    header ul li a{
        display: none;
    }


.hamburger {
    content: url('../images/iconHamburger.png');
    display: block;
  }
}

Upvotes: 2

Matt Whiteley
Matt Whiteley

Reputation: 476

Add display:block to your hambuger class

@media only screen and (max-width: 850px) {
    header ul li a {
        display: none;
    }
    .hamburger {
        display: block;
}
}

Upvotes: 0

Related Questions