Responsive Runway Header Logo

Community Forums Forums Design Tips and Tricks Responsive Runway Header Logo

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  nutsandbolts 1 year ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #77934

    jhkoning
    Participant
    Post count: 6

    Hi there,
    I’m working with this theme currently, & I know there are quite possibly a number of ways to go about the above – but I was just wondering if anyone could recommend the best way to go about this.
    Is it simply to load a different logo depending upon @media queries?
    Or is there a smarter way – specifically with regards to this theme.
    I would prefer to retain the home link ability of the standard text based header – with logo image replacement.
    Thanks in advance,
    Jas

    #77999

    nutsandbolts
    Keymaster
    Post count: 3202

    Can you post a link to your site? It’s always easier to help if we can see what you see.


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

    #78144

    jhkoning
    Participant
    Post count: 6

    Hey @nutsandbolts – thanks for the reply.
    It’s actually being developed locally – so the best I can do are the attached screenshots – hope that is of some help?
    screenshot one
    screenshot two
    As you can see, I’m loading a completely different logo should the screen size be max-width: 768px – not ideal.
    I’m also keen to have the logo retain it’s ahref to home, I’m guessing I’m applying the styles in the wrong place & I should know better, but I’m trying to do too many things at once (it’s that time of year) ;)

    #78146

    nutsandbolts
    Keymaster
    Post count: 3202

    Usually if you’re adding the logo manually in the stylesheet, you can add background-size: contain !important; to the CSS to have the image resize for all screens. It’s hard to tell you exactly how that needs to work without being able to see the live site.


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

    #78151

    jhkoning
    Participant
    Post count: 6

    Now that’s a css rule I’ve not come across before – I’ll give that a go & see how I get on.
    Thanks :)

    #79295

    jhkoning
    Participant
    Post count: 6

    Hi @nutsandbolts, I used background-size: contain !important; & that worked a treat.
    Thank you, I’d never come across that css rule before – very handy.

    #79298

    nutsandbolts
    Keymaster
    Post count: 3202

    Glad I was able to help! If you ever have other CSS rules that should work but don’t, try adding !important before the semicolon. Many times that will force it to override whatever is keeping the rule from working.


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

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

You must be logged in to reply to this topic.