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

Home Forums CSS Header Design like Twitter and Pinterest

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #36762

    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.


    Here is a start for you:


    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.


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


    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?


    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.


    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.

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


    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; }

    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)
  • The forum ‘CSS’ is closed to new topics and replies.