Jump to content
Sign in to follow this  
GAL

header elements

Recommended Posts

GAL

Hi, My client wants to move the logo image up in the header to be top-aligned with the menu navigation: http://www.srhousinggroup.com/home/ I've managed to accomplish this by floating the logo left and the navigation right, but I can only get it to work if the header image is cropped square to include only the actual logo, which means I lose the tagline and the horizontal blue bar. I can't figure out how to keep the tagline and the blue horizontal bar in the header without including it in the image - which then makes it too wide to use the floating solution above. Any CSS or suggestions would be greatly appreciated!! Thanks so much! G

Share this post


Link to post
Share on other sites
Rob
Try this, and adjust the -10 to numbers that work for your site. [code]#branding .content-pad { padding: 0px 0px 0px 0px; } div.branding_wrap {margin-top: -10px;} div.branding_wrap {margin-bottom: -10px;} [/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
GAL
Thanks very much. If I lower the margin-top number (-15 or -20), it moves both the image and the navigation bar up proportionately so the top of the menu gets cut off... This is what I've got going on so far: #branding .content-pad { padding: 0px 0px 0px 0px; } div.branding_wrap {margin-top: -10px;} div.branding_wrap {margin-bottom: -10px;} #primary-nav { width:746px; float:right; padding-top:0px } results: http://www.srhousinggroup.com/home/ Any other ideas?

Share this post


Link to post
Share on other sites
Danny
Hi Glufrano, You could try this, but you will need to change the image css slightly. [code]#primary-nav { position: absolute; right: 0; top: 0; width: 746px; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GAL
Thanks so much guys. I ended up ditching out the colored background and tweaked rangelone's code as follows: #branding .content-pad { padding: 9px 0px 0px 0px; } That totally worked. You guys rock!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×