Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email

Magento Forum

Split navigation links in two lines
Jr. Member
Total Posts:  6
Joined:  2009-10-01

I’m having trouble displaying the top navigation links (’topLinks’ such as Log In, My account, My Cart) with my other links (Home, Page 1, Page2, Page3)

I want to display the topLinks on the top right corner and underneath I want to display my other links:

Log In My Account My cart
Home | Page1 | Page 2 | Page3

I tried to modified the css but it always displays as one line. I changed property from inline to block with no results.

header.phtml looks like this:

<div class="header-container">
div class="header">
h1 id="logo" class="logo" title="<?php echo $this->getLogoAlt() ?>" style="background-image:url(<?php echo $this->getLogoSrc() ?>);"><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->getLogoAlt() ?></a></h1>
<?php echo $this->getChildHtml('store_language'?>
<class="welcome-msg"><?php echo $this->getWelcome()?></p>

ul class="links">
<?php echo $this->getChildHtml('topLinks'?>

ul class="navlinks">
li><a href="#">home</a></li> |        
li><a href="#">page 1</a></li> |
li><a href="#">page 2</a></li> |
li><a href="#">page 3</a></li> |
<?php echo $this->getChildHtml('topMenu'?>

styles.css looks like this:

/* Header ================================================================================ */
.logo { float:leftwidth:140pxheight:44pxoverflow:hidden
.header-container {}
.header { padding15px 0 10px 0;}
.header .logo { background-position:0 0background-repeat:no-repeattext-indent:-999em}
.header .logo a { display:blockwidth:140pxheight:44px}
.header .welcome-msg { font-weight:boldtext-align:right}
.header .links { float:right}
.header .links li { font-size0.8emdisplay:block}
.header .navlinks { font-size0.8emfloat:right}
.header .navlinks ul { padding24px 0px 0px 0px; list-stylenonepositionrelative}
.header .navlinks ul, .navlinks li { displayinlinemargin0px}

This results in something like this: (aligned to the right)

Home | Page1 | Page 2 | Page3Log In My Account My cart

1) How can I setup this two navigation links on two lines
2) How can I add a vertical bar to separate the upper navigation links like this:  Log In | My Account | My cart


Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top