Storebox Logo

Hi, I'm trying to get the logo positioned right but can't get the CSS right. I've tried playing with the setting that I've used on another theme in the overide.css but it didn't work.

I'm trying to position the logo in the top left and then have the search and top menu positioned in line with the vertical center of the logo. Ideally, I want the logo as far to the top as possible so the header isn't taking up too much space.

http://www.getlostcamping.com.au

Thanks any help

Please try with this css:

Code: Select all

#gk-head h2 {float: left;}
#gk-head #main-menu {clear: none; margin-left: 20px;}


Thanks. Is it possible to move the logo and main menu up a little too?

Sure:

Code: Select all

#gk-head {padding-top: 20px;}


It will reduce top padding.

That works...but now the other parts of the header are pushed down. Changing the order of the css in the overide.css file doesn't fix it either. Any suggestions?

Ok, remove last change and test this:

Code: Select all

#gk-head h2 {float: left !important;}
#gk-head #search-2 {height: 20px !important;}
#gk-head #main-menu {margin-left: 20px !important;}


Ok, I had to play around a little but have it looking better based on what you said to try. Do think it looks ok now or what other changes do you recommend?

The code being used at the moment is:

Code: Select all

#gk-head h2 {float: left;}
#gk-head #main-menu {clear: none; margin-left: 20px;}
#gk-head h2 {float: left !important;}
#gk-head #search-2 {height: 35px !important;}
#gk-head #main-menu {margin-left: 20px !important;}
#gk-head {padding-top: 20px;}

Well, I would move main menu to right side, but that is just my taste .

I've moved it to the right, is that what you mean?

Please feel free to suggest whatever changes based on what you think will look good

The code at the moment is:

Code: Select all

#gk-head h2 {float: left;}
#gk-head #main-menu {float: right; clear: none; margin-left: 20px;}
#gk-head h2 {float: left !important;}
#gk-head #search-2 {height: 35px !important;}
#gk-head #main-menu {margin-left: 20px !important;}
#gk-head {padding-top: 20px;}

Well, a little bit to the left so right side of menu align with right side of "user menu" - contact Us link.
The rest looks fine to me.

Perhaps reducing bottom spacing:

Code: Select all

#gk-bottom1 {padding-bottom: 20px;}


would save some space also.

I couldn't quite get the menu's to line up but overall your suggestions make it look better. Thanks for all your help

Instead of moving main menu to the right, what is problematic (it is aligned to right side of parent element, You can move user menu to the left:

Code: Select all

#top-menu {margin-right: 6px;}