Support » Themes and Templates » How To Move Header Image

  • I’m using raindrops theme and I was wondering how I could
    A. Move my header image up to be flush with the top of the webpage. http://www.thebrokenshelf.com
    B. How to make the CSS recognize that I want to use customer buttons.
    any help would be great.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Hi Johannah

    For the first issue – there is a banner that is set to display: none; but has a min-hight of 80px that is causing the gap so you can do something like this:

    #hd {
    min-height: 0px;
    height: 0px;
    }

    For the second issue please can you elaborate some more.. ie what you have tried, what you are trying to achieve and what buttons!

    The Second issue might be harder to explain cause I’m a little rusty with my coding and wording to use. so please don’t yell at me. ha ha!

    For navigation menu, I want to use images I have made for the navigation menu – the ‘about me’, ‘list of reviews’, and ‘other posts’.

    and if I can’t do that…

    how can I just center the navigation menu and change the CSS to make it bigger?

    thank you so much!

    http://www.thebrokenshelf.com

    @salsaturation – I’m looking for the banner code, where do I find it? I tried ‘find’ in notepad and it comes up none…

    is it in the main style sheet or under header?

    Don’t modify any theme files – if you do all of those change will be lost when the theme is updated. You need to use a Child Theme –

    http://codex.wordpress.org/Child_Themes

    Or if you are only making CSS changes, you can put those in custom CSS.

    Ok how about this for some yelling! 🙂

    I am assuming you need to have an icon and the text showing. In that case I would head over to the menu admin section and replace the ‘Navigation label’ with something like this

    <span>About Me</span>

    Leave the title attribute empty

    then in your css add

    #menu-item-1675 {
    background: url('http://thebrokenshelf.com/link-to-image') no-repeat left;
    }
    
    #access .menu-header li a {
    display: inline-block;
    height: 90px;
    }
    
    #access .menu-header li {
    position: relative;
    display: inline-block;
    float: left;
    height: 90px;
    }

    I see. how do I use a child theme? Where do I find one?

    See the link I posted above – you’ll need to make one – but it’s not hard and definitely the way to go so that you don’t lose your work later when the theme is updated.

    @wpyogi – I’ve just been putting all my code in my custom CSS window and it seems to be working fine. I haven’t touched any of the other coding. 🙂

    is it in the main style sheet or under header?

    You have a custom css section under your theme settings or under appearances in admin – add it there

    Yes as I said above, if you are only making CSS changes, custom CSS is fine :)!

    @salsaturation – It’s under my theme settings it says ‘edit css’ and then leaves me a nice big fat CSS window to put in all my codes.

    I’ve worked out most the bugs I think… I’m still working on the Navigation… I at least got it change colors when you hover over the links, so that’s a plus. ha ha!

    You should have a style.css and custom.css or a standalone custom.css box… leave the style.css as is because as WPyogi said if you make changes to style.css that the same thing (loose customisation) will happen again when you upgrade.

    Let me know if you need further help with the navigation

    @wpyogi – thank you. 🙂 I was worried for a minute. ha ha!

    You’re good :). If you haven’t sorted that navigation, another option might be this plugin:

    http://wordpress.org/plugins/nav-menu-images/

    I’ve not used it, but it looks like it works pretty well.

    @wpyogi – THANK YOU!!! That Plugin is AWESOME!
    Check out my awesome customer buttons!
    http://thebrokenshelf.com/

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘How To Move Header Image’ is closed to new replies.