Responsive Header for Metro (no plug-in)

Community Forums Forums Design Tips and Tricks Responsive Header for Metro (no plug-in)

This topic is: not resolved

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #49258

    Doug
    Participant
    Post count: 78

    Hello and happy fourth!

    For my site, http://cbhmboston.com, I am trying to get the header to be responsive without having to use yet another plug-in.

    I am using http://responsinator.com to help me; but, I can’t figure out how to get the logo to center responsively.

    Could anyone help me? I would deeply appreciate it.

    Here’s the css for an iPhone 5 portrait (which is not working):

    #header {
    background: url("http://cbhmboston.com/wp-content/uploads/2013/07/CBHM_LogoWeb_480px2.gif") no-repeat transparent;
    }
    #header {
    max-width: 90%;
    }
    #header {
    min-height: 215px;
    overflow: hidden;
    }

    Thank you!!!
    Doug, Pro Plus Member

    http://cbhmboston.com
    #49259

    dev
    Participant
    Post count: 451

    You say you don’t want to use a plugin. I understand and validate that assertion… we often don’t know where the code comes from and if it has been vetted for malware. That’s why I only use plugins from trusted sources like SP and other vendors who have a long history in the WP community (i.e. like Contact Form 7, NextGen Gallery, etc.)

    Before you embark on a mission to find the code you are looking for, at least try Nick’s Genesis Responsive Header plugin. He is a ‘trusted source.’

    http://designsbynickthegeek.com/plugins/genesis-responsive-header-customizer-update

    If you don’t like it or if it does not work for you, then go forward… but try it first.

    NewMedia Website Design

    #49261

    Doug
    Participant
    Post count: 78

    Thank you, dev

    I didn’t want to say this; but, I’ve tried Nick’s plugin twice and could not get it to work for me either time.

    Thank you anyway,
    Doug

    #49324

    John
    Participant
    Post count: 155

    Doug, here’s a better way: How to replace the StudioPress background header image with a real image logo

    John


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

    #49448

    Doug
    Participant
    Post count: 78

    John,

    Thank you, kindly. I will try that and get back to you.

    My complaint with StudioPress responsive demo themes is that they are responsive only when using the Title Area (text); but, not at all when it comes time to want to use an actual logo.

    I agree with you completely.

    Namasté,
    Doug

    #49451

    John
    Participant
    Post count: 155

    Doug,

    Looking forward to hearing how it works for you.

    John


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

    #49558

    Doug
    Participant
    Post count: 78
    This reply has been marked as private.
    #49679

    Doug
    Participant
    Post count: 78

    Hi, John

    The FTP issue has been resolved…and…

    It works! (Mostly, it’s getting clipped on portrait devices: http://responsinator.com/?url=cbhmboston.com

    Can you advise how to get the logo to fit perfectly, John. Thank you for all your help!!! :-)

    Namasté,
    Doug

    • This reply was modified 1 year ago by  Doug. Reason: Fixed the directory issue
    • This reply was modified 1 year ago by  Doug. Reason: Fixed the directory issue
    #49691

    John
    Participant
    Post count: 155

    Hi Doug,

    Glad to hear you made it this far! For the responsiveness on your site, I’d comment out line 566 – the float:left is what’s holding you back.

    John


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

    #49700

    John
    Participant
    Post count: 155

    Actually it’s going to take more than that, now that I look at it. You’ll need to go through your media queries and fine-tune what happens at the different widths.

    For starters, the padding on the main #wrap div is creating the horizontal scroll bars, so I’d set that to zero (0) starting at 600px.

    You could also resize your logo for different queries, since it seems to dominate the screen on the smaller devices.


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

    #49784

    Doug
    Participant
    Post count: 78

    John,

    You are a good person; and, I thank you immensely for all your help. If I could give virtual gold stars, you would get two!

    I will implement and get back to you again.

    Peace to you in the Black Hills,
    Doug

    #50243

    rick4him
    Participant
    Post count: 128

    @Doug, I’m trying to do the exact same thing on my site. I like how you got your logo working (and looking) on your site. Did you use this method? I tried to use the responsive header plug in, but had a hard time getting it to work. Looking to do this without a plug in.

    #51301

    Doug
    Participant
    Post count: 78

    Hi, Rick

    Apologies for not being online for a while.

    Yes, I used this method; what is your site url?

    Peace,
    Doug

    #51338

    tsoraci
    Participant
    Post count: 6

    @doug do you mind if I hop in this thread as well? I’m having a weird responsive issue with my News theme. Not only does my header text not center like the demo’s, but I also have this weird gap on the right: weird gap
    My site is androidassault.com, thanks for any feedback.

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

You must be logged in to reply to this topic.