Center logo within the Main Site Navigation

Support Forums for LiveMesh Themes & Plugins Forums Agile Theme Support Center logo within the Main Site Navigation

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #6241
    shirer007
    Member

    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??

    #6250
    Ernesto
    Member

    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.

    #6252
    shirer007
    Member
    This reply has been marked as private.
    #6254
    shirer007
    Member
    This reply has been marked as private.
    #6304
    Ernesto
    Member

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

    #6310
    shirer007
    Member

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

    Thanks again

    #6348
    Ernesto
    Member

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Agile Theme Support’ is closed to new topics and replies.