Header Navigation Links - Split layout - Half left and half right side?

Aloha,

I'd like to split my header navigation and have my main links (Home, About Us, Shipping, Contact Us) appear on the left and my auxiliary links appear on the right (Login, Shopping Cart).

Could this be done within tpl_header.php?

Also, how do I make the Shopping Cart link static and stop the Checkout link from dynamically appearing?

Here's a link to my site: www.hawaiianwoodys.com/store

Many mahalos for all suggestions,

Kelly

gingertea:

Aloha,

I'd like to split my header navigation and have my main links (Home, About Us, Shipping, Contact Us) appear on the left and my auxiliary links appear on the right (Login, Shopping Cart).

Could this be done within tpl_header.php?

Also, how do I make the Shopping Cart link static and stop the Checkout link from dynamically appearing?

Here's a link to my site: www.hawaiianwoodys.com/store

Many mahalos for all suggestions,

Kelly

find the following section of code in tpl_header.php and make the changes as indicated by the highlighted portions:

<!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul class="back"> <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li> include the links here for About Us, Shipping, Contact Us </ul> <ul class="forward"> <?php if ($_SESSION['customer_id']) { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li> <?php } else { if (STORE_STATUS == '0') { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li> <?php } } ?>

<!--<?php // if ($_SESSION['cart']->count_contents() != 0) { ?>-->
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<!--<?php // }?> -->

</ul> </div> <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div> <br class="clearBoth" /> </div> <!--eof-navigation display-->

Thank you so much, Clyde. I really appreciate your time.

One thing though: "Checkout" is appearing and I'd like to do away with it completely. I just want Login and Shopping Cart on the right side.

Any advice?

gingertea:

Thank you so much, Clyde. I really appreciate your time.

One thing though: "Checkout" is appearing and I'd like to do away with it completely. I just want Login and Shopping Cart on the right side.

Any advice?

Just comment out the line: as indicated by the highlighted portion(s)

<!-- <li><a href="<?php // echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php // echo HEADER_TITLE_CHECKOUT; ?></a></li> -->

I tried this and the links that went to the right were over way too far and not all visible. After playing with it for 4-5 hours I put the links back to the way I had them.

How do you control how far to the right these links move?

Here's my site http://www.omegadigitalvoice.com/zencart

Richie

The problem is that you have shifted #navMainWrapper, so its right edge is now 68px farther than it would normally be. Give it a padding-right of additional 68px or so and you should be ok.

Actually, margin-right: 68px; does the job even better, as the invisible wrapper volume no longer sticks out beyond #mainWrapper on the right edge, and will not affect small-screen displays.

#navMainWrapper {
	margin: 0 6.8em 0 0; /*compensate for relative position*/
	background-color: transparent;
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	position: relative;
	top: 122px;
	Left: 68px;
	height: 1%;
	}	

Thanks for the reply. I 'think' I got it now..

This is what I wound up with after playing with it for while:

#navMainWrapper {
margin: 0 8.0em 0 0;
background-color: transparent;
padding: 0.5em .2em;
font-weight: bold;
color: #ffffff;
position: relative;
top: 122px;
left: 68px;
height: 1%;
}

I see there are a few different ways of accomplishing things here.. One of things I noticed that also seems to work is adjusting the size of the #navMainWrapper
ie: width: 80%.

That also seems to help prevent the wrapper from hanging over the right side of the page. Is there a preferred way of doing this or is it pretty much trial and error?

Or, will do it one way negatively effect performance (page load time) versus doing it another way? Or will doing it one way make it more friendly to all current browsers.

Will IE Like it done one way where FF prefers it done another way?
One of the things I noticed is how different things render in different browsers. For example when I look at the links in my navMain wrapper in a Mozilla browser (Firefox, SeaMonkey etc) and then look at it in IE they render differently.

In IE fonts placement of text, colors all seem a little different and off a little where as with a Mozilla browser everything is crisp, clear and where I want to see it.
Any thoughts?

Rich

If you have a fixed width page, the method you use won't generally matter.

If you have a fluid page, you should not mix different kinds of measurements; i.e. you have positioned left 68px, so the margin-right should be stated in px, not %. Em should be ok, as ZC default makes 1em = 10px, but font size changes could alter that.

The general rule for site design is to design to the most standards-compliant browser (Firefox), and then fix any quirks that show up in IE.