WordPress.org

Support

Support » Themes and Templates » Menu bar background image doesn't work well

Menu bar background image doesn't work well

  • Hello everyone,

    So I did ll the reading possible to change the menu bar background image on my site (www.iamaleksandra.com) and it finally worked with this code:

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

    Nothing else was working – I tried everything suggested in other topics. However now I have these two black stripes sticking out (from where the original bar was) and it makes the blog look quite weird…please help.

    I am working in child theme, Twenty Eleven. I have basic knowledge of CSS but can follow instructions well.

    Thanks a lot!

    Aleksandra

Viewing 10 replies - 1 through 10 (of 10 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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

    WPyogi

    @wpyogi

    Forum Moderator

    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(‘http://www.iamaleksandra.com/wp-content/uploads/2013/01/old_wall.png’) repeat scroll;
    }

    Thanks a lot for the help!

    Aleksa.

    WPyogi

    @wpyogi

    Forum Moderator

    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('http://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

    WPyogi

    @wpyogi

    Forum Moderator

    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('http://www.iamaleksandra.com/wp-content/uploads/fonts/GOTHIC.eot'); src: local('☺'), url('http://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(‘http://www.iamaleksandra.com/wp-content/uploads/2013/01/old_wall.png’);
    margin: 0;}

    #access ul ul a {
    background-image:url(‘http://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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Menu bar background image doesn't work well’ is closed to new replies.
Skip to toolbar