-1

enter image description here I would like to see my menu links.

I have implemented a CSS dropdown menu using the checkbox hack.

I have attached an icon to the bottom of the menu. When triggered, the menu drags the icon down along with it.

However, the icon's "margin" (according to dev tools) covers the entire width of the menu, such that the only way to display the links in the menu is to make the menu drop down significantly lower, changing:

#navbar-checkbox:checked + .menu ul {
        max-height: 50px; ==============> 75px
        z-index: 3;
}

I have tried just about everything I can think of: from z-index, to all kinds of positions, to transparent to opacity etc.

I simply want to display the links.

body {
  background-color: purple;
}
.menu {
  padding: 15px 15px 0px 15px;
  background: transparent;
  min-height: 2.75em;
  line-height: 0em;
  border-bottom: 1px solid white;
  position: relative;
}
.logo {
  color: white;
  transition: 0.4s ease-in-out;
}
#logo {
  background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 80%;
  display: block;
  margin-top: 35px;
  margin-bottom: -10px;
  height: 50px;
  width: 50px;
  transition: 0.4s ease-in-out;
  z-index: 2;
}
.logo:hover {
  color: mediumturquoise;
  transition: 0.4s ease;
}
.menu .logo div {
  position: absolute;
  width: 200px;
  margin-top: -20px;
}
.logo p {
  margin-left: 15px;
  margin-top: 35px;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Coustard', serif;
}
.menu ul {
  font-family: 'Open Sans', sans-serif;
  color: white;
  transition: max-height 0.4s linear 0;
  margin: 0;
  padding: 0;
  text-align: right;
}
.menu a {
  text-decoration: none;
  color: white;
  transition: 0.4s ease-in-out;
}
.menu a:hover {
  color: black;
  transition: 0.4s ease-in-out;
}
.menu li {
  display: inline-block;
  padding: .45em 1.1em;
}
@media(max-width:321px){

#logo {
  margin-left: 5%;
}
}
@media (min-width: 0px) {
  .menu ul {
    max-height: 0;
    overflow: hidden;
  }
  .menu li {
    visibility: visible;
    display: inline-block;
    padding: 4em 0 0.5em;
    border: none;
    margin-right: 4px;
  }
  .menu .navbar-handle {
    display: block;
  }
  #navbar-checkbox:checked + .menu ul {
    max-height: 50px;
    z-index: 3;
  }
  #navbar-checkbox:checked + .menu li {
    visibility: visible;
  }
  #navbar-checkbox:checked + .menu .navbar-handle,
  #navbar-checkbox:checked + .menu .navbar-handle:after,
  #navbar-checkbox:checked + .menu .navbar-handle:before {
    border-color: white;
  }
}
.navbar-handle {
  display: none;
  cursor: pointer;
  position: relative;
  font-size: 45px;
  padding: .5em 0;
  height: 0;
  width: 1.6666666666666667em;
  border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
  position: absolute;
  left: 0;
  right: 0;
  content: ' ';
  border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
  top: 0.37777777777777777em;
}
.navbar-handle:after {
  top: 0.8888888888888888em;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.menu .navbar-handle {
  position: absolute;
  font-size: 1.2em;
  top: 1.3em;
  color: white;
  right: 25px;
  z-index: 10;
}
.navbar-checkbox {
  display: none;
}
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
  <a class="logo" href="http://myapp.com">
    <div class="logo">
      <p>myapp.com</p>
    </div>
  </a>
  <ul>
    <li><a href="#">how it works</a>
    </li>
    <li><a href="#">about us</a>
    </li>
    <li><a href="#">contact</a>
    </li>
  </ul>
  <p id="logo"></p>
  <label for="navbar-checkbox" class="navbar-handle"></label>
</nav>

3
  • tell me in short what you want? i did not understant your question
    – N Kumar
    Feb 16, 2015 at 8:57
  • @reenlendr to see the menu links. Run the code snippet you will understand
    – softcode
    Feb 16, 2015 at 8:59
  • okey i got it.. wait ..
    – N Kumar
    Feb 16, 2015 at 9:03

2 Answers 2

0

Inorder to see the links visible just try to adjust the padding of .menu li padding: 4em 0 0.6em; to padding: 2em 0 0.6em;

5
  • I thought your first priority is to make the links visible. Do you want to move the links?
    – Raghuram
    Feb 16, 2015 at 9:36
  • My first priority is to make the links visible. Moving them is not a solution it is an alternative.
    – softcode
    Feb 16, 2015 at 9:39
  • I think the links are visible now by changing the value of padding to .menu li.
    – Raghuram
    Feb 16, 2015 at 9:42
  • No when you change the value of padding you move the links
    – softcode
    Feb 16, 2015 at 9:43
  • For moving the links try to add width to .menu ul as 90%.
    – Raghuram
    Feb 16, 2015 at 9:44
0

here are corrections:

put these before

<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>  

these style must be added and edited

#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}

My advice:

#navbar-checkbox:checked + .menu ul {
display: block;
}

#navbar-checkbox + .menu ul {
display: none;
}

Do not use height as parameter.

8
  • brother you will have to redesign your page.. and use display as parameter not height.. it will work.. i used it in my recent project
    – N Kumar
    Feb 16, 2015 at 9:18
  • you will have to add more properties in this class
    – N Kumar
    Feb 16, 2015 at 9:19
  • Does the code you posted work with my code? Or are you suggesting I rewrite? @reenleedr
    – softcode
    Feb 16, 2015 at 9:21
  • but if you dont want to rewrite.. the put <label> before <ul>. and remove padding of <li>
    – N Kumar
    Feb 16, 2015 at 9:25
  • I'd rewrite it if I wasn't curious why it's not working. Why are they even being hidden in the first place? @reenleedr
    – softcode
    Feb 16, 2015 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.