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

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