Forums

aarongmoore

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.

joshuanhibbert

Here is a start for you: http://jsfiddle.net/joshnh/TVWkg/

aarongmoore

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.

joshuanhibbert

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

aarongmoore

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?

joshuanhibbert

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.

aarongmoore

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.

joshuanhibbert

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

aarongmoore

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:


<div id="header">
			<div class="innerHeader">
        		<h1 id="logo">
				<p style="text-indent: -9999px; "><?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?></p>
				</h1>
				<p style="text-indent: -9999px; "><?php bloginfo( 'description' ); ?></p>

    		</div>
	 	</div>

h1#logo			{ background-image: url(images/agm.png); width: 353px; height: 38px; }

aarongmoore

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

treehouse : what would you like to learn today?

Forums

Header Design like Twitter and Pinterest