Menu bar background image doesn't work well

I don’t see that in Firefox or Chrome – what browser are you using?

Hey hey,

I am using Chrome, IE and Firefox…just couple of hours ago I had change the header and the code so might be that it’s still loading in the previous version? But after clearing my cache I see the ends of the menu bar – black rectangles, hanging off the ends (below the header).

Can you see it now?

Aleksa

Yep, gotcha. What do you want in that black space? It’s coming from this CSS:

#access, #access ul ul a {
    background: none repeat scroll 0 0 #181818;
}

So you can add that to your child theme and change that to whatever you want to show up there.

Okay so let me try that…I would like it gone! ??

I am guessing to do that I can change “#181818” to “rgba(0, 0, 0, 0)”? Or maybe “background: transparent”?

Thanks a lot,

Aleksa

Depends on what you want to show up there – if you want the same background image as the menu items, put that image in the background there as well.

Yes, exactly, so I have tried this and it’s not working:

#access, #access ul ul a {
background-image:url(‘https://www.iamaleksandra.com/wp-content/uploads/2013/01/old_wall.png’) repeat scroll;
}

Thanks a lot for the help!

Aleksa.

You have a syntax error in here – after background-color should be a colon not semi-color ?? :

#content {
background-color; transparent;
margin-bottom: 0;
margin-left: 3%;
margin-right: 30%;
margin-top: 0;
width: 65%;
}

And here – you need to use 0 (zero) not “none” for the margin:

#access a{
background-image:url('https://www.iamaleksandra.com/wp-content/uploads/2013/01/old_wall.png');
margin: none;
}

Argggh – tried that…doesn’t work again…any other ideas? I appreciate the help.

Thanks a lot,

Aleksa

This is the current CSS for that element:

#access, #access ul ul a {
    background: none repeat scroll 0 0 #181818;
}

What happened to the image?

Also check on the background here:

#access {
    background: linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;

It also looks like you have CSS in the middle of the menu?? That’s not where it should go – CSS goes in the head or the page or in an external stylesheet.

<ul id="menu-main-menu" class="menu">
<style media="screen" type="text/css">
@font-face{font-family: 'Century Gothic'; src: url('https://www.iamaleksandra.com/wp-content/uploads/fonts/GOTHIC.eot'); src: local('?'), url('https://www.iamaleksandra.com
.....
</style>
<li i

Hi!

SO I looked into these…the second point you make – I have not put that CSS on my own. I am guessing it comes from a plugin I installed to change the font of the website. I am not sure what the head of the page is or the external stylesheet, but considering I have only been making modifications (i.e. adding custom code to the child theme) I have nothing to do with that alteration (well, not by touching the code at least). However I don’t see how moving that code would change the appearance of the black lines (now turned light gray – my attempt to mask the problem by changing the menu background color through Theme Options).

Your first point – again – all I see on my end is the alteration on the child theme so the background image is still there and the code reads (all my child theme alterations pertaining to the Menu Bar:

#access {
background: transparent; repeat scroll 0 0 transparent;
box-shadow: none;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;}

#access a{
background-image:url(‘https://www.iamaleksandra.com/wp-content/uploads/2013/01/old_wall.png’);
margin: 0;}

#access ul ul a {
background-image:url(‘https://www.iamaleksandra.com/wp-content/uploads/2013/01/old_wall.png’);
margin: 0;}

Lastly when you say “Also check on the background here:
#access {background: linear-gradient(#252525, #0A0A0A)” I am not sure what you mean by check? Like change something?

I am sorry if this is supposed to be apparent but it is not – I am a beginner, and I do appreciate the help (and patience).

Kindly,
Aleksa.