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 magento.stackexchange.com, 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 community@magento.com.

Magento Forum

Split navigation links in two lines
 
theridep
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>

        <
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> |
    </
ul>
    </
div>
      
<?php echo $this->getChildHtml('topMenu'?>
</div>

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

Thanks!!!

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