Full off-canvas menu

Question

I'm trying to make an off-canvas menu, but encountered a problem. Only the two first menu links are showing with the grey-black background but I want all of the menu links to have it. The remaining 5 menu links are indeed inside the menu (as you can see when you hover on the links), but they are with a transparent background.

I put the html and css codes into a Jsfiddle: https://jsfiddle.net/ghbx6fmn

P.S. The codes seem to be working fine on Jsfiddle, but on my website it doesn't...

/*=====  SLIDE MENU  ======*/

/*----------  HIDE SELECT CHECKBOX  ----------*/

.toggle, 
.full-screen-close
{
 display: none;
}

.full-screen-close
{
 width: 100%;
 height: 100%;
 position: absolute;
 cursor: pointer;
 top:0;
 left:0;
}

/*----------  TOGGLE OFF-CANVAS MENU  ----------*/

.toggle:checked + .container > .menu-container 
{
   margin-left: 70%;
}

.toggle:checked + .container > .content .full-screen-close
{
   display: block;
   background: rgba(0,0,0,.5);
}

.menu
{
 padding-top: 24px;
}

.toggle-btn,
.close-btn
{
 cursor: pointer;
}

.toggle-btn
{
 font-size: 2.25rem;
}


.close-btn
{
 float: right;
 font-size: 1.5rem;
 padding: 1.5rem;
 color: #ededed;
}

.menu-container, 
.content
{
 transition: margin 0.5s ease-in-out;
}

.menu-container
{
 background: #2c3e50;
 width: 40%;
 margin-left: 100%;
 
 float: right;
 height: 100%;
 position: absolute;

 z-index:99;
}

.slide-menu i
{
 margin-right: 1rem;
 font-size: 1.5rem;

 vertical-align: middle;
}
.slide-menu li a
{
 color: #fff;
 padding: 1.5rem;

 font-size: 1.125rem;

 text-transform: uppercase;
 font-weight: 600;

 display: block;

 transition: background-color .5s ease-in-out;
}

.slide-menu li a:hover
{
 background-color: #34495e;
}

/*=====  MEDIA QUERIES  ======*/
@media (max-width: 460px) {
 .slide-menu li a
 {
  font-size: 0.875rem;
  padding-left: 12px;
 }

 .slide-menu li i
 {
  font-size: 16px;
 }
}

@media (max-width: 320px){
 .slide-menu li i
 {
  display: none;
 }
}

<html lang="en">
 
  <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="Off-canvas navigation menu Tutorial" />
  <meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
      <meta name="author" content="AcasA Programming" />
      <link rel="icon" href="../../favicon.ico" />


  <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/right-slide.css" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
 

  <body>

   <input type="checkbox" id="offcanvas-menu" class="toggle" />

   <div class="container">

    <aside class="menu-container">

     <div class="menu-heading clearfix">
      <label for="offcanvas-menu" class="close-btn">
       <i class="fa fa-times"></i>
      </label>
     </div><!--end menu-heading-->

   <nav class="slide-menu">
    <ul>
     <li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
     <li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
     <li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
     <li><a href="#"><i class="fa fa-cogs"></i>Testing 4</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 5</a></li>
     <li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
     <li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
    </ul>
   </nav><!--end slide-menu -->

  </aside><!--end menu-container-->

  <section class="content">

   <label for="offcanvas-menu" class="full-screen-close"></label>

   <div class="menu right">
    <label for="offcanvas-menu" class="toggle-btn">
           <i class="fa fa-bars"></i>
          </label>
      </div><!--end menu-->     

     <div class="menu-options clearfix"> 
    
    <div class="right">
       
      </div>
     </div>

     <div class="content-body">
     </div><!--end content body-->

    </section><!--end content-->
    
   </div> <!--end container -->
  </body>
</html>

score 1 · Accepted Answer · answered May 14 '16 at 19:15

Note: I'm not thrilled with the structure of your HTML/CSS and think it could use a refactor. My answer will address the issues you're having, but you should aim to simplify your code further.

Problem 1: Your menu won't increase the height of the gray background, because the menu is an absolutely positioned element, and hence outside of the document flow.

The easiest way to ensure the gray background fills the entire viewport is this:

.full-screen-close {
  ...
  p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
  position: fixed;
}

Problem 2: Now that we've fixed the first issue, we see the blue background behind the menu doesn't extend all the way.

No problem. Let's just remove the height property.

.menu-container {
  ...
  h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
}

Now, .menu-container is as tall as it needs to be, not 100% of the parent's height.

Have a look: https://jsfiddle.net/ghbx6fmn/2/

Thanks, it worked! Another question. Now is the button to open up the menu on the left side. How can I make the three lined button to be on the right side of screen? And can I change the width of the menu when it has been expanded? Sorry, I'm quite new to coding. — Bryan M, May 14 '16 at 23:12
I think your follow-up questions belong in a new thread. If my answer works for you, please up-vote/accept it and open a new question. — Andy Hoffman, May 15 '16 at 00:36

Full off-canvas menu

1 Answers1