CODEWITHSUNDEEP
cssnavigation
Matt
Matt

Reputation: 221

Vertical menu with left image

I have a two part problem on my site

I want the navigation menu to look something like the attached image:

Side Navigation Menu Example

The first problem I have is making the nav menu show up off of the right side of the page. I think I have the margins set right but the menu doesn't appear after it hits the right side of the yellow border.

Second is the little banner that goes behind the site body on the left side. I created an image for this but when I try to place it, it won't show up in the right place. Right now I have it set to repeat so you can see where it is at (along with some funky positioning). Is there a way to make the part that shows below the actual menu link to show up?

Upvotes: 0

Views: 1074

Answers (3)

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

You can achieve this affect using pure css.

HTML

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58" id="menu-item-58">
    <a href="http://ranchocordovaeventscenter.com/?page_id=57">Building Facts</a>
    <div>
       <div class="wrap-behind"></div>
    </div>
</li>

CSS

#extra-navbar .menu-item {
    margin-bottom: 0.9rem;
    margin-left: 20px;
}

.wrap-behind {
    background: none repeat scroll 0 0 #F9B233;
    border-left: 13px solid transparent;
    border-right: 1px solid #053053;
    border-top: 10px solid #053053;
    float: left;
    height: 0;
    width: 0;
}

#extra-navbar ul li {
    background-attachment: scroll;
    background-color: #104571;
    background-position: left bottom;
    background-repeat: no-repeat;
    color: #FFFFFF;
    overflow: visible;
}

Upvotes: 1

Mike
Mike

Reputation: 1738

In style.css on line 1431 you have the property overflow: hidden. Remove that and you will see the stuff to left of the menu. That should help both your problems.

Upvotes: 0

Artem Svirskyi
Artem Svirskyi

Reputation: 7849

div #page has class .site with rule overflow: hidden; it cause the first problem

Upvotes: 0

Related Questions