Responsive Header

Community Forums Forums General Discussion Responsive Header

This topic is: not resolved

This topic contains 8 replies, has 5 voices, and was last updated by  John 1 year ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #65086

    Loudness
    Participant
    Post count: 38

    I”m currently using the WordPress default “Header image” uploader. The header height was modified in the php file to accomodate the image i did.

    Now I want to get a fully responsive header (There’s a lot of stuff in that header… logo, tagline, 3 button, image, etc). How can I do that using genesis ? I”m able to code the css (not a problem) with media query, but what are the step required to :

    1. Use a custom header (I guess we have to change function.php ?)
    2. Header height will be different on each media query size, how can I adjust that in the php file ? Basically I would like the header height controlled by the CSS.

    So basically, do I have to create a new “responsive-div-header”, hook it to the top to replace the current header & then code in the child theme css file ?

    #65263

    chantal2012
    Participant
    Post count: 60

    I’m interested in finding this out as well

    #65278

    Susan
    Moderator
    Post count: 9254

    Try this tutorial:

    http://blackhillswebworks.com


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #67053

    Loudness
    Participant
    Post count: 38

    Hi, sorry for the late reply. Thanks for the link Susan, however I’m looking for a much more than juste a logo…. here’s what I want in the header :

    http://img202.imageshack.us/img202/4212/5e41.jpg

    Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

    Where Can I structure all the elements ? Image/icons/text, etc ?

    • This reply was modified 1 year ago by  Loudness.
    • This reply was modified 1 year ago by  Loudness.
    #67056

    Loudness
    Participant
    Post count: 38

    Thank you for the link Susan, however I’m looking for much more than just a logo in the header… Here’s what I want to do :

    http://img202.imageshack.us/img202/4212/5e41.jpg

    Where does all the html/css of this header go ?

    • This reply was modified 1 year ago by  Loudness.
    • This reply was modified 1 year ago by  Loudness.
    #67113

    John
    Participant
    Post count: 157

    Do you have a link to the actual site you’re working on?


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #67160

    emasai
    Participant
    Post count: 738

    @Loudness and Chantal2012, I think this might be what you are looking for
    http://wpsites.net/web-design/responsive-inline-header-widgets-side-by-side-in-studiopress-themes/


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    #67912

    Loudness
    Participant
    Post count: 38

    No link, the site is local right now

    Would it be possible to add 1 big widget that covers the full header size & then custom code right in the widget window ? (using html & div’s ?)

    #68274

    John
    Participant
    Post count: 157

    When I have other things in my header besides the logo, I add those with text and/or other widgets and make adjustments with CSS. But I still use the logo method as described in the tutorial that Susan mentioned to properly add a logo to the header area.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.