No replies
angiec
angiec's picture
Offline
newbie
Last seen: 7 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-05-18
Posts: 1
Points: 2

I'm working with a superfish menu. I re-colored the images and replaced them with the old images in the css. For some reason, the menu-btn_rtur is not showing up. I want it there when the menu is inactive, like you see right when you go to the home page. At some obvious points, it will need the sub indicator arrow. My client wants to launch today, so I'm really under the gun and need help-- eternally grateful to anyone who responds. Smile

Site Link: http://staging.phantasea.net/cpi/
CSS I added:

#navigation-menu ul.sf-menu > li > a {
    background: url(<a href="http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png" rel="nofollow">http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-btn_rtur.png</a>) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #ffffff;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}
 
#navigation-menu ul.sf-menu > li > a > span {
    background: url(<a href="http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png" rel="nofollow">http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-btn_ltur.png</a>) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}
 
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(<a href="http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png" rel="nofollow">http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-with-arrow-btn_rtur.png</a>) top right no-repeat;
    padding: 0 26px 0 0;
}
 
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(<a href="http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png" rel="nofollow">http://staging.phantasea.net/cpi/wp-content/uploads/2012/05/menu-active-with-arrow-btn_rtur.png</a>) top right no-repeat;
    padding: 10px 0 10px 0;
}
 
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_rtur.png) top right no-repeat;
}

Original CSS:
/* Begin Main Navigation Menu */
#navigation-menu {
    position:absolute;
    right:20px;
    top:5px;
    font-size:14px;
    height:40px;
}
.navigation-menu {
    position:relative;
    z-index:22;
}
#main-menu {
    background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;
    width: 100%;
    position:relative;
    z-index:101;
    height:56px;
    margin-bottom:-6px;
}
#dropdown-holder {
    display: block;
    position:relative;
}
#navigation-menu > ul {
    padding-top: 7px;
}
#navigation-menu > * {
    padding:0;
    margin:0;
    font-size: 1em;
}
#navigation-menu ul.sf-menu {
    padding: 10px 0 0 0;
}
#navigation-menu ul.sf-menu > li {
    background:none;
    list-style: none;
    float: left;
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
    cursor: default;
}
#navigation-menu ul.sf-menu > li > a {
    background: url(../images/menu-btn_r.png) top right no-repeat;
    display: block;
    padding: 0 20px 0 0;
    color: #E8E8E8;
    text-decoration: none;
    border:0 none;
    cursor: pointer;
}
#navigation-menu ul.sf-menu a {
    line-height: 1.2em;
    padding:8px 16px;
}
#navigation-menu ul.sf-menu a > span.sf-sub-indicator {
    top: 17px !important;
}
#navigation-menu ul.sf-menu ul a > span.sf-sub-indicator {
    top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
    background: url(../images/menu-btn_l.png) top left no-repeat;
    display: block;
    padding: 10px 0 10px 20px;
    color:#FFF;
    line-height:22px;
}
#navigation-menu ul.sf-menu > li {
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul {
    background: url(../images/menu-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a.sf-with-ul:hover {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 0 26px 0 0;
}
#navigation-menu ul.sf-menu > li > a > span.sf-sub-indicator {  /* give all except IE6 the correct values */
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
    padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #FFF;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}
 
#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
    background: url(../images/menu-active-btn_r.png) top right no-repeat;
    color: #6A6A6A;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #00717D;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
    background: url(../images/menu-active-btn_l.png) top left no-repeat;
    color: #555;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a.sf-with-ul,
#navigation-menu ul.sf-menu > li.current_page_item > a.sf-with-ul {
    background: url(../images/menu-active-with-arrow-btn_r.png) top right no-repeat;
}
 
 
/* End Main Navigation Menu */