Treehouse: Grow your CSS skills. Land your dream job.

Header Design like Twitter and Pinterest

  • Anonymous
    # February 20, 2012 at 11:07 pm

    Alright, I’ve another question. How do I code a bar to go at the top of a page similar to twitter and pinterest? In other words, I want the name/logo in the center with a search to one side and navigation to the other side. I prefer the way this is done on twitter because the three elements do not move if the browser width is adjusted.

    In the past I have tried to use flow and always found it messed things up so my knowledge of how to use it properly is practically nonexistent.

    # February 20, 2012 at 11:21 pm

    Here is a start for you:

    # February 20, 2012 at 11:37 pm

    Once I realized that the width of the boxes on that link could be changed it made it clear it is a good start.

    My question is, how would I keep them centered like on twitter? When the width of the page changes, the navigation and search and logo stay in fixed/constant positions.

    # February 20, 2012 at 11:45 pm

    Ah, I have updated my original link to do that for you.

    # February 21, 2012 at 12:02 am

    When I put that into the wordpress theme I’m working on, it doesn’t work.

    And when I look at it in the link you posted, it still seems to adjust to the width of the page rather than staying fixed.

    Also, what is the best way to work on a wordpress theme? Is there a better way then looking at it in preview?

    # February 21, 2012 at 12:17 am

    In regards to the width, it will act as though it is fluid until it gets to 960px wide, then it will remain that wide, centering itself in the viewport. In regards to it not working in WordPress, we would really need to see the code.

    I use MAMP to work with WordPress themes locally. Using preview is incredibly slow. If you are on a Windows based machine then there is also WAMP.

    # February 21, 2012 at 12:35 am

    When I put the code into wordpress, the gray doesn’t show up at all. Then in the code from your link there is html in

    and no div for the header so I’m really confused. I have no idea what to do. Maybe I’m not explaining what I want clearly. Might just be time to call it a night and get some sleep.
    # February 21, 2012 at 12:55 am

    Heh, that generally works for me. See how you go tomorrow.

    # February 21, 2012 at 1:14 am

    I’ve made some progress; reverse engineering from my previous site layout. I’m stuck because for the center where you have text, I’m using an image and it isn’t at the center of the page. I’m not sure how I’ll get the links and search to either side once the main logo is centered.

    Code looks like this:

    h1#logo			{ background-image: url(images/agm.png); width: 353px; height: 38px; }
    # February 21, 2012 at 1:27 am

    Alright, adding a “display: inline-block;” to that h1#logo did the trick to get it centered. Now to figure out how to put the navigation and search on either side. No, sleep first.

    Thanks for your help so far @joshuanhibbert

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

You must be logged in to reply to this topic.