Grow your CSS skills. Land your dream job.

MAGENTO: Top nav with logo centered between 4 links + responsive.

  • # June 21, 2013 at 12:43 pm

    If you checkout http://www.sirandmadame.com/

    I’m going for that style two nav links on the left LOGO center two on the right.

    http://codepen.io/anon/pen/xEGJt

    I’m having issues with padding/margins this is the best I could do..Do i want to display-inline? I have it floating as the site is currently responsive and want to keep it that way.

    I got close to spacing it by margin-right:70px; with no padding..but the logo is still to high and the leather link is in the middle..Can someone point me in the right direction?

    Thank you!

    # June 21, 2013 at 1:14 pm

    Check this lot out.

    http://css-tricks.com/search-results/?q=centered+logo+menu

    # June 21, 2013 at 1:54 pm

    Here is my codepen.. i’m really close but i’m having issues with Leather being infront of the logo..+ when I resize the nav falls off the page..
    http://codepen.io/anon/pen/xEGJt

    Also on other pages with breadcrumbs under it it goes back to normal top nav? I’m using magento..

    http://www.kaehler1920.com/thestory.html

    # June 21, 2013 at 5:00 pm

    I’m hoping your code only looks like that in your codepen, that hurts to look at. I’d reformat that first to clean it up a bit. If you are trying to display everything on the same line (links and logo) just use a list with 5 `

  • ` tags and use the third tag for an img tag. Just my O2. Good luck.
# June 21, 2013 at 5:09 pm

but i’m using magento and the code is auto-generating the li tags
this is from my top.phtml file:

Projects

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

*May or may not contain any actual "CSS" or "Tricks".