Center logo within the Main Site Navigation

[shirer007]

Hi – I am trying to center my logo within the links of the main site navigation fiddling with the CSS of my agile template – and am having one heck of a time. Is this even do-able?? How do I fix the UL li properties (or can I)?

I’m trying to get a lock up similar to http://www.chrisspooner.com. Centered logo and links to either side… Screenshot included… Any suggestions?

I was also hoping to change the logo and background color out per section – so the Old KY home section would be orange (see attached), Lovely & luminous would be green (see attached), folio – yellow, etc, etc…

Any suggestions??

[Ernesto]

Hi, there is no reason why you couldn´t be able to achieve this. In the page you used as an example, you have two separate lists and each one is given a CSS attribute (.leftlist {float: left} .rightlist {float: right{) and the logo is set through .centerlogo {position: absolute}

If you want to, you can send me a link and I´ll provide you with the exact code you need. For the backgrounds, I’d need to take a look at how the code is being produced in the page.

[shirer007]

This reply has been marked as private.

[shirer007]

This reply has been marked as private.

[Ernesto]

Hi, could you send us the user name as well? If not, I won’t be able to check your Dashboard

[shirer007]

Hey – I’m sorry! My user name is shirerbu…

Thanks again

[Ernesto]

Hi, there are several things you’ll need to change to get the site lookig as you wish to. Firstly, the logo is an entire image of considerable, which means that even if you move the navigation, it’ll push the logo. I’d recommed creating two separate images (one for the face and another for the name+slogan). That’ll allow you to move the logo and center it.

Secondly, the navigation list needs to be made up of two separate lists. The div would look something like this

<nav> <ul>menu-portfolio left
<li>first item</li>
<li>second item</li>
</ul>

<ul>menu-portfolio right
<li>third item</li>
<li>fourth item</li>
</ul>

This will allow you to move them separately and set them up to the sides of the logo.

For the background, you’ll need to give each page logo a distintive id and apply different CSS codes to each one to change the color. For example:

#home {background-color: green;}
#hogwash {background-color: orange}

Hope that helps, let me know if you need further assistance.
Sorry I can’t be more precise with the codes, but you’ll need to advance in generating this elements so we can continue working with them

[Author]

Posts