Trying to move the CSS background (but not the text) up to look like a "tab"

URL: http://goo.gl/AO0DCj

I’m trying to move the background in the primary menu (currently behind Workshops & Programs) up so it looks like a “tab” - I want it to extend up past the main background of #nav. If the background were an image, I know how to do it, but I can’t seem to make it work with this CSS-only background.

Is it possible?

Hi,

You can’t move a background outside of its element. You need to move the element itself. :slight_smile:

However you can’t move the element because the ul is overflow:hidden so when you move it it will not be visible. You are using overflow:hidden as a float container so use the clearfix method instead and then you can move the tab upwards.

e.g.


.menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a {
margin-top:-20px;
padding-bottom:26px;
}
#menu-primary-menu{overflow:visible;zoom:1.0}
#menu-primary-menu:after{
content:" ";
clear:both;
display:block;
height:0;
visibility:hidden;
}

Thank you for that. Do you think it’s possible to move the text down to the center of the tab so that it stays in near the same place whether it’s active or not?

Yes just adjust the padding-top to move the text down and reduce the padding-bottom.


.menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a {
margin-top:-20px;
padding-bottom:7px;
padding-top:29px
}

Just play around with the margins and padding until it looks like you want :slight_smile:

Thanks again, Paul. I appreciate you!!