AgentPress: Footer color changing when I adjust secondary menu drop-down CSS

[updatealan]

I'm using AgentPress 2.0 Child Theme.

When working with my Style Sheet (style.css), every time I adjust the Secondary Navigation Menu Drop-Down background color it, also, changes the background color of the Footer.  As you can see from the CSS I'm pasting below, I've swapped out the background-color for a .PNG to give a transparency effect to these elements.  This issue was already happening before I did so.

Does anybody know what I'm doing wrong or have a workaround for this?

.agentpress-gray #nav,
.agentpress-gray #nav li li a:hover,
.agentpress-gray #nav li li a:active,
.agentpress-gray #subnav li li a:hover,
.agentpress-gray #subnav li li a:active,
.agentpress-gray #footer-widgets {
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png')

http://dtconfidential.com/condominium-living/the-viridian

Any help would be much-appreciated!

Best,
Alan

[Robin]

You will want to remove the last line from the code you posted above (.agentpress-gray #footer-widgets). If you just take it out, the footer widgets turn blue. If you want to style them differently, set up a new rule with that line. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[updatealan]

Hi Robin,

Thank you for your timely support! When I removed the last line of that code, as you suggested (above), it did turn the background to solid blue. However, I want the footer background to be the 'bg_footer2.png.'

The issue I'm having arises when I attempt to edit the CSS for the Secondary Navigation (the menu at the top of the page). What I'm trying to achieve is a reversal of the hover and drop-down backgrounds. When a visitor hovers over "CONDOMINIUM LIVING" or "WHAT WE DO," I'd like the background for the drop-down items to be 'bg_footer2.png.' (So that it's not confusing, going forward, I duplicated the 'bg_footer2.png' image, named it 'bg_secondarynavigation.png' and swapped that into the Secondary Navigation code.) When they roll over one of the items, I'd like the background to be solid blue. For reference, I'm pasting some CSS below. First, is the Secondary Navigation code, and second, some code from the bottom of the Style Sheet which seems to overwrite some of the of the Secondary Navigation code.  Any help would be much-appreciated! Again, thank you!

/* Secondary Navigation
------------------------------------------------------------ */

#subnav {
-moz-box-shadow: 0 1px 1px #000;
-webkit-box-shadow: 0 1px 1px #000;
border-top: 0px solid #000;
box-shadow: 0 0px 0px #1b2755;
height: 42px;
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_secondarynavigation.png');
margin: 0 0 0px;
overflow: hidden;
text-transform: uppercase;
font-family: 'Swis721 BT', arial, serif;
-webkit-text-stroke: 1px #1b2755;
}

#subnav .wrap {
font-family: 'Swis721 BT', arial, serif;
color: #fff;
margin: 0 auto;
width: 1060px;
text-transform: uppercase;
}

#subnav ul {
float: left;
width: 100%;
}

#subnav li {
float: left;
list-style-type: none;
}

#subnav li a {
background: none;
color: #1b2755;
display: block;
font-size: 12px;
padding: 10px 15px 10px;
position: relative;
text-decoration: none;
}

#subnav li a:hover,
#subnav li a:active,
#subnav .current_page_item a,
#subnav .current-cat a,
#subnav .current-menu-item a {
color: #4b8308;
}

#subnav li a .sf-sub-indicator {
display: block;
overflow: hidden;
position: absolute;
text-indent: -9999px;
}

#subnav li li a,
#subnav li li a:link,
#subnav li li a:visited {
background-color: #1b2755;
border: 0px solid #333;
border-top-width: 0;
color: #f5f5f5;
font-size: 12px;
padding: 4px 10px 4px;
position: relative;
text-transform: uppercase;
width: 148px;
}

#subnav li li a:hover,
#subnav li li a:active {
background-color: #747ead;
color: #fff;
}

#subnav li ul {
height: auto;
left: -9999px;
position: absolute;
width: 170px;
z-index: 9999;
}

#subnav li ul a {
width: 150px;
}

#subnav li ul ul {
margin: -33px 0 0 169px;
}

#subnav li:hover>ul,
#subnav li.sfHover ul {
left: auto;

And, here is that (overwriting) code from the bottom of the Style Sheet:

/* AgentPress Gray
------------------------------------------------------------ */

body.agentpress-gray {
background-color: #000000;
}

.agentpress-gray h2 a,
.agentpress-gray h2 a:visited {
color: #CCC;
}

.agentpress-gray a,
.agentpress-gray a:visited,
.agentpress-gray #header ul.menu li a:hover,
.agentpress-gray #header ul.menu li a:active,
.agentpress-gray #header ul.menu .current_page_item a,
.agentpress-gray #header ul.menu .current-cat a,
.agentpress-gray #header ul.menu .current-menu-item a,
.agentpress-gray #header ul.menu li li a:hover,
.agentpress-gray #header ul.menu li li a:active,
.agentpress-gray #nav li.right a:hover,
.agentpress-gray #subnav li a:hover,
.agentpress-gray #subnav li a:active,
.agentpress-gray #subnav .current_page_item a,
.agentpress-gray #subnav .current-cat a,
.agentpress-gray #subnav .current-menu-item a,
.agentpress-gray .s,
.agentpress-gray .enews #subbox,
.agentpress-gray h2 a:hover {
color: #b4bcd8;
}

.agentpress-gray #nav li a:hover,
.agentpress-gray #nav li a:active,
.agentpress-gray #nav .current_page_item a,
.agentpress-gray #nav .current-cat a,
.agentpress-gray #nav .current-menu-item a,
.agentpress-gray #nav li li a,
.agentpress-gray #nav li li a:link,
.agentpress-gray #nav li li a:visited {
background-color: #ed008c;
}

.agentpress-gray #nav,
.agentpress-gray #nav li li a:hover,
.agentpress-gray #nav li li a:active,
.agentpress-gray #subnav li li a:hover,
.agentpress-gray #subnav li li a:active {
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png');
}

.agentpress-gray #nav li a:hover,
.agentpress-gray #nav li a:active,
.agentpress-gray #nav .current_page_item a,
.agentpress-gray #nav .current-cat a,
.agentpress-gray #nav .current-menu-item a,
.agentpress-gray #nav li li a,
.agentpress-gray #nav li li a:link,
.agentpress-gray #nav li li a:visited,
.agentpress-gray #subnav li a,
.agentpress-gray #subnav li li a,
.agentpress-gray #subnav li li a:link,
.agentpress-gray #subnav li li a:visited {
color: #f5f5f5;
}

.agentpress-gray #nav li li a:hover,
.agentpress-gray #nav li li a:active,
.agentpress-gray #subnav li li a:hover,
.agentpress-gray #subnav li li a:active {
color: #fff;
-webkit-text-stroke: 1px #b4bcd8;
}

.agentpress-gray .listing-price {
background: #333;
}

.agentpress-gray .listing-text {
background: #cf1900;
}

.agentpress-gray .listing-wrap .more-link,
.agentpress-gray div.gform_footer input.button,
.agentpress-gray input[type="button"],
.agentpress-gray input[type="submit"] {
background-color: #444;
border: 3px solid #1b2755;
color: #b4bcd8;
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png');
}

.agentpress-gray .listing-wrap .more-link:hover,
.agentpress-gray div.gform_footer input.button:hover,
.agentpress-gray input:hover[type="button"],
.agentpress-gray input:hover[type="submit"] {
border: 1px solid #1b2755;
background:url('http://dtconfidential.com/wp-content/uploads/2013/04/bg_footer2.png')
}

[Robin]

I guess I am not fully clear on what it is you are trying to do.

The block of css you posted initially covers the navigation and the footer widgets. If you want to style them differently, then you would take the last line out and give it its own rule. If you want to change the hover color of your dropdowns, look at the styling block starting at line 2199--you will want to add a background rule to that (background: #ff0000; for example, although that's red).

Is that closer?

---

I do the best I can with what I’ve got. (say hey on twitter)

[updatealan]

Sorry for the delayed response. I believe you helped me to work this out. However, if you don't mind, let's leave the discussion open, for now, until I'm sure that I have it working the way that I'd like for it to work. Thank you!

[Author]

Posts