The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Centering Overlapping Badge In Header + Responsive Design

  • # March 11, 2013 at 12:37 am

    Hey, two specific questions concerning this web app in progress:

    1) I’m trying to center that BP badge in the header, but have the width of the banner/header be more narrow than the badge itself. This is the Illustrator mockup of what it SHOULD look like:

    Is it possible to nest it within the header div and still have it break out, or is it more practical to put in a different div altogether and just position it manually? I’ve tried to do the latter, but it breaks Bootstrap’s responsive navbar and the text doesn’t link/a:hover properly, which brings me to my next point:

    2) The text in the header (and the spacing/line-height of some of the divs) look awful when the window is sized down to a phone’s dimensions, so I’m wondering if it’s possible for the text to be underneath. Mockup here:

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed