Reposition logo above Navbar

HTML & CSS
1

Hi,

Having a problem in positioning a logo to fit central above the navbar.

Site

I have moved the navbar more central (not pixel perfect yet), but when I try to position the logo above and centre to it, the main image/slider box goes with it. I tried to add padding or margin to #main-nav (also clear:both) so the main box sits below the Navbar,but it seems the image/slider box will only move in relation to the logo.

Could anyone give me an idea on how to achieve this?

Thank you
\

2

Firstly, to center the menu, remove the left margin on the container and add this:

#main-nav ul {text-align: center; overflow:hidden;}
#main-nav li {display: inline-block}

Then remove float: left; from the LIs.

You could then just get rid of the header div altogether and place the log as a background image on the UL (by giving the UL a large top padding and centering the logo in the background):

ul {background: url(images/go9creative-logo.jpg) no-repeat 50% top;}

However, it’s not a good idea to have the site title served as an image only (especially a background image) as it’s invisible to blind users including Google. So I would put the header div above the navigation and enter the actual logo text, and then you can replace that text with the image if you want, similar to the way it’d done here:

http://www.pmob.co.uk/temp/headerreplacement3.htm

3

Hey Ralph,

Just saying thanks for your reply and sorry for the delay. My client wants to keep the logo on the left for now, but we did centre the text.

I will be using your advice on my own site though so much appreciated!

Rob

4

No worries, Rob. Glad the answer was of some use. :slight_smile:

5

Hi,

Having some trouble getting the navbar items to spread the whole width of the page. I’d like to have the portfolio button and blog button much closer to the sides. Have been using padding-right under main-nav li but if I go over 140px it screws up as if there is no more room.

Site

Could anyone show where could I spread the menu items out further the correct way?

Thanks

Rob

6

You could maybe try something like this:

#main-nav li.page_item.page-item-6 {display: none !important;}
.page_item {padding: 0; width: 24%; text-align: center;}
#main-nav li.page_item {padding: 0;}
.page-item-11 {text-align: left;}
.page-item-24 {text-align: right;}
7

That looks great Ralph. Just have an issue with the portfolio link no longer working. Had the same problem earlier when I tried to float the navbar left and use padding-right. Not sure why that is happening.

Also, is there a way to adjust the about and contact buttons if I need to?

Thanks again for your help Ralph.

:slight_smile:

Is there a good place to read up on setting up these navbars and how the code here works?

8

Hi,

Just adding that I couldn’t get the portfolio button to work or adjust the other items, so have gone with something else instead.

Thanks for your suggestion though. :slight_smile:

Rob

9

No worries! I kind of prefer your new solution anyway. :slight_smile: