WordPress.org

Ready to get started?Download WordPress

Forums

Menu bar background image doesn't work well (11 posts)

  1. aleksandrarocks
    Member
    Posted 1 year ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I don't see that in Firefox or Chrome - what browser are you using?

  3. aleksandrarocks
    Member
    Posted 1 year ago #

    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

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. aleksandrarocks
    Member
    Posted 1 year ago #

    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

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. aleksandrarocks
    Member
    Posted 1 year ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  9. aleksandrarocks
    Member
    Posted 1 year ago #

    Argggh - tried that...doesn't work again...any other ideas? I appreciate the help.

    Thanks a lot,

    Aleksa

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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
  11. aleksandrarocks
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic