Going Green Header & Menu CSS Problem

Community Forums Forums Design Tips and Tricks Going Green Header & Menu CSS Problem

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  ZachE 8 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #70845

    ZachE
    Participant
    Post count: 3

    Hi all,

    This is the site I’m working on: http://doctorklaper.com/wp/

    I’m having adding a responsive header image — whenever I add my 680×140 image (image here: http://doctorklaper.com/wp/wp-content/uploads/2013/11/KlaperHeader_680.png) only part of the image shows up in the header, and the location of it changes whenever the screen dimensions change. Ideally, i’d like the header image to be centered on all pages.

    Also — I wanted to add my primary menu below my header — which I’ve done through some hooks in functions.php but there is a layer of transparent white above — any ideas how to fix that? I’ve got the secondary menu in the footer and it has the same transparency issue.

    Thanks all!

    -Zach

    http://doctorklaper.com/wp/
    #70864

    nutsandbolts
    Moderator
    Post count: 3104

    Okay, a couple of things:

    (1) You’ll need to add a width and height to your CSS for .title-area – that’s why you’re only seeing a small part of the image.

    (2) To center the header image, remove the image in Appearance > Header and add the following to your stylesheet:

    .site-header .title-area {
    background: url(http://doctorklaper.com/wp/wp-content/uploads/2013/11/KlaperHeader_6803.png) center no-repeat !important;
    }

    (3) If you remove the background image from .site-inner .wrap the menus will show the green background.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71007

    ZachE
    Participant
    Post count: 3

    Thanks so much, Andrea! Those suggestions are great.

    I ended up doing your second suggestion, but the only problem was that as I reduce the resolution of a page, most of the content shrinks, but the logo stayed the same — and on mobile it was too large. By uploading to the Appearance > Header function it automatically re-sizes everything.

    I really don’t know if there is an easy way to resize it directly through the CSS but if you have any thoughts I’d love any other assistance.

    Thanks again!

    -Zach

    #71060

    nutsandbolts
    Moderator
    Post count: 3104

    Looks like it’s resizing now – did you get this resolved?


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71126

    ZachE
    Participant
    Post count: 3

    Yes I did — thanks again for your help!

    -Zach

    #72975

    ZachE
    Participant
    Post count: 3
    This reply has been marked as private.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.