Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Modify header and css to remove link overlays and put below image WordPress

If you go to my test site @ http://www.nopointsforspeeding.com you will see that the link buttons are on top of my header image. I need them to add space below the image for the buttons and make them below the image, if at all possible. I also do not want the links highlighted with the rollover link image(I'm guessing what it is).
Anyone know how I would edit the header.php and css to do this?

2011-12-20 by ashleygray

Answers (6)

2011-12-20

Luis Abarca answers:

Change the .logo height


.logo {
height: 150px;
}

ashleygray comments:

Fantastic!
How about removing the highlighting of the page or link?

Luis Abarca comments:

Yep


.top_navigation_in ul li a:hover {
color: #666;
background: #fff;
}

2011-12-20

Marko Nikolic answers:

1. You should change height, not width. I think this is not good solution anyway, you'll find that looks very bad. Instead, try to put out borders from image, and to put them as separate header background (or even to add them with CSS3)

2. Remove background from:

.top_navigation_in ul li a:hover {
color: #666;
background: url(1-default/active_lnk.png) repeat-x;
}

2011-12-20

designchemical answers:

line 139 of style.css change to:

.header_right {
float: right;
clear: both;
}

in 1-default.css line 55 remove the following for the links:

background: url("1-default/active_lnk.png") repeat-x scroll 0 0 transparent;

2011-12-20

Matt Varone answers:

Hi Ashley,

With the given assets and structure you could get away shrinking those buttons vertically. Try this CSS file to see a possible result:

http://pastebin.com/LFJfgKm0

Kind Regards!

2011-12-21

Arnav Joy answers:

delete following lines

background: url("1-default/active_lnk.png") repeat-x scroll 0 0 transparent;

in 1-default.css in line no.35

2011-12-22

nina magbanua answers:

Hi,

If you want your page to be like this "see attached image" edit your css.

on your style.css

.logo
{
float: left;
height: 145px;
}

.top_navigation_in
{
float: right;
height: 88px;
position: relative;
right: 30px; --> add this style
z-index: 9999;
}

for the highlight

on 1-default.css

.top_navigation_in ul li a:hover {

color: #666666;
}