Grow your CSS skills. Land your dream job.

About a responsive header layout: logo + slogan + social

  • # August 20, 2013 at 9:49 am

    Hi,

    I have these responsive layouts:

    http://tinypic.com/r/qqd3s4/5

    As yo can see, in the mobile layout I get social buttons are before the slogan. But I want to slogan before the social buttons. What should I do? Have duplicated slogan and social buttons and toggle them using media queries ? is that smart? Or use jquery to add/remove them? or there is a cleaner solution?

    # August 20, 2013 at 9:59 am

    We’d need to see a live link or Codepen to really assist.

    # August 20, 2013 at 10:04 am

    Thanks Paulie_D, this is structure I have, is that enough?:

    http://codepen.io/maxwbailey/pen/dzfAE

    As you can guess, the social buttons are above the h1 to not leave a very big blank space on the right of logo till the end of the h1.

    # August 20, 2013 at 11:34 am

    Take a look at this ……… Re-size window for effect.

    http://codepen.io/maxwbailey/pen/HfIvy

    # August 20, 2013 at 11:37 am

    I don’t exactly like it but: http://codepen.io/Paulie-D/pen/vuqbw

    There are some magic numbers in there but, in general it works.

    # August 20, 2013 at 12:02 pm

    @Paulie_D
    I think there will be a problem in your code that when screen will be small then the slogan box height will increase and then slogan box will hide to social box. Because social box is at fixed height.

    # August 20, 2013 at 12:16 pm

    I’m not sure why any of the boxes should get taller though….There is a ‘tablet’ and ‘mobile’ version in the Codepen…the structure is the same or both and the only difference between the two ‘css’ version is the positioning.

    As I said, I’m not happy with it…..it was just a first pass.

    Please fork it and tweak away.

    I’d have to re-work it with actual media queries to get it better. I would say that I dislike using absolute positioning and try to avoid it if possible…but perhaps in this case?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".