Shop & Buy Logo

Hi, In the Shop & Buy template I've added a custom logo and currently configuring the override.css to make a few small changes but just need to know which settings I should change.

http://www.shanemackintosh.com/gifts

I want the search box to move up a little so it's inline with the logo and I want the menu moved up so the header height is reduced. What settings should I change to achieve this?

Settings currently changed are below and this is from what I've used on another template.

Code: Select all

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

Thanks

1. To move the search box up use:

Code: Select all

#gk-search {
margin: 44px 0 21px 20px;
}


and change 44px to lower value that suits your needs.

Remember to enable "CSS override" in template settings - advanced section.

2. To move the menu up, You would need to reduce bottom spacing under the logo:

Code: Select all

#gk-head h2 {
margin: 0 0 10px 0;
}


- reduce 10px to 0 to gain 10 px.

You could also make menu shorter:

Code: Select all

#main-menu > li {
height: 72px;
line-height: 72px;
}
#main-menu > li > a {
height: 72px;
line-height: 72px;
}


Reduce all 72px to same, smaller number to make menu shorter.

Thanks. It looks a lot better now. The / in the menu though isn't displaying right. What setting should I change to fix that?

Ok, please add this to override.css:

Code: Select all

#main-menu > li:before {
line-height: 50px;
}