LittleNooby LittleNooby - 7 months ago 22
HTML Question

Understanding a template to modify it

I don't seem to understand the Russian Doll philosophy of html and thus, I fail to correctly apply css to the desired container.

Here are two templates I'd like to use simultaneously :



And my problem is that the result is this :

First everything seems all right :
enter image description here
Then I click on the hamburger to open the menu :
enter image description here
The problem is that the portion of code which does the border the overlay applies on
<nav>
and it doesn't seem to affect the
<section>
but it does affecter the
<header>
and
<footer>
(you can't see the later on the screenshots).

Here is the portion of code :

.bt-menu.bt-menu-open {
height: 100%;
border-width: 30px 30px 30px 90px;
background-color: rgba(0,0,0,0.3);
transition: border-width 0.3s, background-color 0.3s;
}


I reached this conclusion by doing this :
enter image description here
And also adding the above css to my sections inline. It did what I would expect by opening the menu.

So, why doesn't it affect my section?

Here is my html if it can prove useful : http://pastebin.com/g7Exx64f

Answer

Weave: http://kodeweave.sourceforge.net/editor/#89d761c4072d7ae653f1a8205392074a

I skimmed through the CSS from the pen you linked some have a z-index which means it's stacked above your element.

Plus your container is probably not set to position: fixed; so your content will scroll with you.

In addition you can toggle the display of the social network icons in pure css. You will need an input[type=checkbox] with a unique id. Say #callmenu. Then you need a label[for=callmenu]. For is used trigger the checkbox when clicked.

Say you want to toggle the display of .social. To do this with the checkbox you set what you want the css of .social to be before it's checked.

.social {
  visibility: hidden;
}

Then you set what you want it to look like when the checkbox is checked...

#callmenu:checked ~ .social {
  visibility: hidden;
}

The snippet below is a simple example of what I believe you'd like to achieve.

You can view this weave which utilizes the pen you linked and font-awesome.

/* Border Menu */
#callmenu {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
}
label[for=callmenu] {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  font-size: 2.6752em;
  margin: 0.2em 0.7488em;
  color: #666;
}
.bgoverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .3;
  z-index: 1;
}
.icon-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: #3a3a3a;
  z-index: 1;
}
.icon-menu ul {
  list-style: none;
  padding: 2.576em 0;
  text-align: center;
}
.icon-menu li {
  font-size: 0;
  padding: 0;
  margin: 0;
}
.icon-menu li a {
  color: #999;
  padding: 1.12em;
  transition: all ease-in 150ms;
}
.icon-menu li a:hover {
  color: #cecece;
}

/* When menu is checked */
#callmenu:checked ~ .icon-menu li {
  font-size: 1.76em;
  margin: 0.768em 0;
}
#callmenu:checked ~ label[for=callmenu] {
  color: #d5ebe4;
}
<input type="checkbox" id="callmenu">
<div class="bgoverlay"></div>
<div class="icon-menu">
  <ul>
    <li>
      <a href="javascript:void(0)">
        Twitter
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        G+
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        Facebook
      </a>
    </li>
  </ul>
</div>
<label for="callmenu">
  menu
</label>