Remove box from behind topnav bar

[samantha]

Hi, I'm using the Freelance theme. I have removed the topnav bar by adding the following code to style.css:

/* Hide Navigation Menu in home page*/
.home #topnav {
display:none;
}

This has removed the text but still left behind a black box that covers the site title. Can anyone tell me how to remove it?

Thanks!

[wmwebdes]

Link to your site please Samantha.

[samantha]

site is http://www.tyingvines.org

[wmwebdes]

Get the message...
"Tying Vines
...will be back shortly"

[samantha]

Sorry, I was asked to put that up whilst changing code. I have removed it now.

[wmwebdes]

Have you sorted it Samantha - looks OK this end?

[samantha]

No, haven't sorted it. I am using Chrome on  a Mac. I have tried using Firebug Lite to identify what it is but can't figure it out. Is there any way to upload a screenshot to the forum?

[wmwebdes]

I added a top margin as shown below, try that

#header {
width: 960px;
height: 110px;
margin: 35px auto 0;
padding: 0;
}

[samantha]

The black box is still there, but it did move the site title and description down below the box which looks better than when the box was over the top of the title/description text.

Ideally I'd still like to remove that black strip from the top of the page altogether. Any ideas?

Thanks for your help. So much to learn... sigh.

[Susan Nelson]

That box across the top of the page is actually part of the whole background image (as seen here). To remove it, you'll need to recreate the background image - maybe just crop that part off depending upon what you want to do with the design.

[samantha]

Thanks, Susan. Will try that tomorrow.

[frobn]

I think the freelance theme an Add topnav section function

Edit functions.php and remove it.

p.s. it is best to make a backup of the functions.php and edit through the cpanel or ftp

[wmwebdes]

Samantha
As Susan points out, the top black section is part of the background image from this section of CSS:

body {
background: #CCCCCC url(images/bg.png) repeat-x;
color: #333333;
font-size: 14px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 auto 0;
padding: 0;
line-height: 24px;
}

The image has a black top section and then a gray gradient below.
If you remove the image part from the CSS you will be left with a gray backgrounf of colour #CCCCCC

Or as Susan mentioned you could crop the black top section from the image and upload - make sure you keep a copy of the original image.

Looks as though you are about there.

[samantha]

frobn, I did find that later and had done as you suggested. Much tidier!

Thanks very much wwemdes & Susan - it's now just right 🙂

I changed the code to:

body {
background: #FFFFFF repeat-x;
color: #333333;
font-size: 14px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 auto 0;
padding: 0;
line-height: 24px;
}

Thanks again.

[Susan Nelson]

Glad I could help!

[Author]

Posts