WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I remove the gray bar from my header? (twenty eleven theme) (13 posts)

  1. aplusr
    Member
    Posted 1 year ago #

    Hi,

    I would like to remove the gray bar from my twenty eleven theme as I have a custom header with a white background. There is this gray bar at the top of my custom header that won't go away.

    I have tried going to: appearance->editor->style.css and changing `#branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
    }`
    to `#branding {
    border-top: none;
    }`

    But this did not work. Is there anything else that I can try?

    Thanks,

    Andy

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you post a link to your site, someone can look at it.

  3. aplusr
    Member
    Posted 1 year ago #

    Hi,

    My website can be found here: http://www.laptopdealscentral.com/

    Andy

  4. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Are you using a child theme or a custom CSS plugin?

  5. aplusr
    Member
    Posted 1 year ago #

    - I've just been editing the code within #branding style.css from the back-end

  6. aplusr
    Member
    Posted 1 year ago #

    appearance->editor->style.css is where I've been trying to remove the header

  7. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Eleven theme. First create a child theme for your changes.

  8. aplusr
    Member
    Posted 1 year ago #

    I've created a Twenty Eleven child theme and got rid of the gray bar but now my search field has fallen to the middle of the page!

    Here is my style.css:

    /*
    Theme Name: Twentyeleven Child Theme
    Description: Child theme for the twentyeleven theme
    Author: Bob
    Template: twentyeleven
    */

    @import url("../twentyeleven/style.css");

    #branding {
    border-top: none;
    padding-bottom: 10px;
    position: relative;
    z-index: 2;
    }

  9. On line 628 of your styles.css you will find:

    #branding .with-image #searchform {
    top: auto;
    bottom: 20px;
    max-width: 195px;
    }

    Just add these to your child css and fiddle with the top and bottom values.

  10. aplusr
    Member
    Posted 1 year ago #

    Hi Christine,

    Modifying the top and bottom values doesn't change the location of the search box unfortunately. I've cleared the cache but the search box stays in the same position

  11. miri
    Member
    Posted 1 year ago #

    Where is it supposed to be? I removed "bottom: -27px;" from the following in Firebug and it moved the box way up, but I think farther up than you want.

    #branding .with-image #searchform {
    top: auto;
    bottom: -27px;
    max-width: 195px;
    }
  12. aplusr
    Member
    Posted 1 year ago #

    Sorry, I think I was having a cache problem. I disabled W3 total cache temporarily while I edit the css, and cleared my web browser history and now I can see it is back in the right place.

    I also deleted an invisible character before #branding that was apparently producing a strange error.

    Thanks!

  13. mcintyre777
    Member
    Posted 6 months ago #

    hey its Chris.
    hey how do you remove the wordpress header off your site mate? I don't need the world to see that across the top of my webpage.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.