WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] pesky nav bar color - changed child, but no results? (12 posts)

  1. artisana
    Member
    Posted 1 year ago #

    I'm editing the style.css of a child twenty eleven theme for this site: finefeatherskombucha.com

    I had successfully made the navigation bar transparent (as well as the hover nav bar), but when I decided to start over and do things right by creating the child theme, I somehow am not able to recapture the magic, although it seems I've added background:transparent where it is needed.

    I would also LOVE to make the footer background transparent as well as that pesky gray line at the top of the page

    Please advise. I am a newbie at wit's end!

    /* =Menu
    -------------------------------------------------------------- */
    
    #branding {
    	background-color: transparent;
    	padding-top: 262px;
    }
    
    #access {
    	background: #transparent;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }

    I can provide more code if needed.

    Thank you!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Code's actually not very useful with CSS questions - can you post a link to your site.

    EDIT - oh, sorry just saw the link. DUH! Looking at it.

    And good job for making a child theme, BTW!

  3. artisana
    Member
    Posted 1 year ago #

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's the background image in this:

    #access {
        background: linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        clear: both;
        display: block;
        float: left;
        margin: 0 auto 6px;
        width: 100%;
    }

    You should be able to override that by adding background to the #access (you already have most of this) in your child theme:

    #access {
        background: none repeat scroll 0 0 #xxxxxx;
        clear: both;
        display: block;
        float: left;
        margin: 0 auto 6px;
        width: 100%;
    }
  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The line at the top is a border on #branding so add the border-top to your:

    #branding {
        background-color: transparent;
        padding-top: 262px;
        border-top: 0;
    }

    For the footer this:

    #site-generator {
        background: none repeat scroll 0 0 transparent;
        border-top: 0;
  6. artisana
    Member
    Posted 1 year ago #

    WPYogi, Thank you!!!!
    I've made those changes, and I'm happy to say they are (mainly) successes!

    Can you please tell me what you would do about the shadow box that appears around the nav bar?
    I have created a 0.5px #4db4e7 line below the bar which I want to keep, but I do not want the box.

  7. artisana
    Member
    Posted 1 year ago #

    Also, I would like the background to also be transparent when one hovers on the nav bar.
    How should I do this?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Add box-shadow: none; to the #access CSS.

    Add the background to this:

    #access li:hover > a, #access a:focus {
        color: #4DB4E7;
        background: transparent;
    }

    The best way to work with these kinds of CSS issues is using Firebug - if you're not already doing so, it's really useful.

  9. artisana
    Member
    Posted 1 year ago #

    Thank you again!!!

    I'm still not able to solve the nav bar hover background even after your last recommendation. I am seeing a white-to light gray gradient, but I've searched the file for "gradient" fields and changed them all to transparent, to no avail.

    Also, I do have Firebug, but when I "inspect element" it shows me the html, not the css, and when I switch over to css it just starts from the top, not at the line with that direct element I'm inspecting. Perhaps I'm not using it properly??

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Perhaps I'm not using it properly??

    There's another way to use it "Inspect with Firebug" which opens a panel at the bottom of the page -- on the left portion of the panel is the HTML and the right side is the corresponding CSS. (At least that's how it works on Macs -- PCs may be different.) But Firebug's site has tons of good info, so read through that for how to help.

    This is the parent CSS for the menu background upon hover:

    #access li:hover > a, #access a:focus {
        background: linear-gradient(#F9F9F9, #E5E5E5) repeat scroll 0 0 transparent;
        color: #373737;
    }

    One of the problems is that you seem to have a copy of the entire parent stylesheet in the child theme? That's not really how child themes should be set up -- it makes it much harder to keep track of the changes you've made and it creates a lot of duplicate CSS code... It may be too late to change that now, but FYI.

  11. artisana
    Member
    Posted 1 year ago #

    ah, yes, I wanted to keep the entire style sheet so that I could change the various components that are already outlined, but I am very new to CSS and child/parent themes so I'm sure there are smarter ways to go about reaching my goals for this site.

    Again, thank you tremendously for your assistance. I will do my best to carry on from here.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It actually does not work quite that way. Keeping the stylesheet doesn't help you change them -- in fact, it's making it much harder. The better way is to use Firebug to look at the existing styles using Firebug -- and copy only that section of code to the child theme and change it there. Then that changed code will override the parent theme code. It will help you to learn a bit more about CSS -- this is a good reference site:

    http://www.w3schools.com/css/

    Oh, and you're more than welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic