Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS About a responsive header layout: logo + slogan + social

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #147584
    tirengarfio
    Participant

    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?

    #147586
    Paulie_D
    Member

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

    #147587
    tirengarfio
    Participant

    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.

    #147599
    Nishant
    Participant

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

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

    #147600
    Paulie_D
    Member

    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.

    #147605
    Nishant
    Participant

    @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.

    #147607
    Paulie_D
    Member

    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?

    #206220
    Shikkediel
    Participant

    Hope that works out. They should fix their own site as well though.

    Validation errors

    Pagespeed insights

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.