Forums

HELP - Having trouble making my sidebar menu hover

Permalink
So I've been tinkering with my site and wanted to provide a hovering sidebar, so the menu items always were shown if you scroll the page.

At one point I got the bar to work correctly and the menu wasn't going over the footer. I started adding more footer items into the site and now the menu goes completely in the footer area. (attached screenshot).

Does anyone know how to make this so the side menu doesn't overlap the footer area at all and stop just above it? I've made a custom template to call upon this, however the actual css code is in my bootstrap.css file. I tried putting the selection tag in my css as well in hopes that when you are at that section of the page, the menu would be highlighted - not working either.

I tried putting some z-index things but didn't work. Tried using the aside tag which didn't work out too well either.

http://concrete.certain.com/index.php?cID=251...

Any help is appreciated! Thanks!

Code in my bootstrap.css
.sidebarfixed {
   position: fixed;
   float:right;
   padding-left:5px;
   left: 73%;
   White-space: nowrap;
   @media (max-width: 768px)
   top:50%;
}


CSS for custom template
.aboutsidebar {
   color: #77BC1F;
   font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, san-serif;
   font-weight: 500;
   font-size: 16px;
   }
.aboutsidebar ul {
   margin: 0;
   padding-bottom: 0;
   background-repeat: no-repeat;
   list-style: none;
   }
::selection {
   color: #FFFFFF;
   }
Viewing 15 lines of 42 lines. View entire code block.

2 Attachments