CODEWITHSUNDEEP
htmlcss
MOSW
MOSW

Reputation: 23

On-click menu - stay visible

I have a responsive (HTML/CSS) "hamburger" menu when the size of screen is below 768px. Clicking on the hamburger the menu appears, but it won't stay visible. Any ideas on how to keep it visible so that one can click on the links of the menu?

CSS

    nav {
    float:right;
    padding:25px 20px 0px 0px;
}
#menu-icon {
    display:hidden;
    width:40px;
    height:40px;
    background: url(img/icons/nav-dark.png) center;
}
ul {
    list-style:none;
}
nav ul li {
    font-family: 'verdana', sans-serif;
    font-size: 150%;
    display: inline-block;
    float: left;
    padding: 10px;
}
nav ul li a{
    color:#6991AC;
}
.current {
    color:#F0F;
}
a:hover {
    color:#A5BDCD;
}

@media screen and (max-width: 768px) {
    #menu-icon {
        display: inline-block;
    }

    nav ul, nav:active ul {
        display:none;
        z-index:1000;
        position:absolute;
        padding:20px;
        background:#F5F5F5;
        border:1px solid #A5BDCD;
        right:20px;
        width:50%;
        border-radius:3px 0 3px 3px;
        opacity:.95;
    }

    nav li {
        text-align:center;
        width:100%;
    }
            nav:active > ul {
        display: block;
    }
}

HTML

    <header>


  <nav>

        <a href="#" id="menu-icon"></a>
    <ul class="main">
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="survey.html">Contact</a></li>
                </ul>

            </nav>
     </header>

Upvotes: 2

Views: 340

Answers (1)

jsadev.net
jsadev.net

Reputation: 2590

you schould use :focus instead of :active.. and you have to select the "hamburger" not the whole nav.

here is my solution:

nav {
  float: right;
  padding: 25px 20px 0px 0px;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: url(img/icons/nav-dark.png) center;
}

ul {
  list-style: none;
}

nav ul li {
  font-family: 'verdana', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  padding: 10px;
}

nav ul li a {
  color: #6991AC;
}

.current {
  color: #F0F;
}

a:hover {
  color: #A5BDCD;
}

@media screen and (max-width: 768px) {
  #menu-icon {
    display: inline-block;
  }
  .main {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #F5F5F5;
    border: 1px solid #A5BDCD;
    right: 20px;
    width: 50%;
    border-radius: 3px 0 3px 3px;
    opacity: .95;
  }
  nav li {
    text-align: center;
    width: 100%;
  }
  #menu-icon:focus ~ .main {
    display: block !important;
  }
}
<header>
  <nav>
    <a href="#" id="menu-icon">#</a>
    <ul class="main">
      <li><a href="index.html" class="current">Home</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Our Team</a></li>
      <li><a href="survey.html">Contact</a></li>
    </ul>
  </nav>
</header>

View this solution in a Fiddle: https://jsfiddle.net/smwn4sdg/

an other solution providing close-on-click: https://jsfiddle.net/smwn4sdg/1/

Note: Just remove the "#" of the "burger"... i've used it because jsfiddle dosn't know your image ;)

EDIT:

adding this to your css makes your links clickable, too:

  .main:hover {
    display: block !important;
  }

New Fiddle: https://jsfiddle.net/smwn4sdg/3/

Upvotes: 1

Related Questions