Results 1 to 8 of 8
  1. #1
    Join Date
    Jul 2007
    Posts
    36
    Plugin Contributions
    0

    Default 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

  2. #2
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

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

    Quote Originally Posted by gingertea View Post
    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-->

  3. #3
    Join Date
    Jul 2007
    Posts
    36
    Plugin Contributions
    0

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

    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?

  4. #4
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

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

    Quote Originally Posted by gingertea View Post
    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> -->

  5. #5
    Join Date
    Aug 2007
    Location
    New York State & Cape Town
    Posts
    76
    Plugin Contributions
    0

    help question Re: Header Navigation Links - Split layout - Half left and half right side?

    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

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

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

    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.
    Code:
    #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%;
    	}

  7. #7
    Join Date
    Aug 2007
    Location
    New York State & Cape Town
    Posts
    76
    Plugin Contributions
    0

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

    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

  8. #8
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

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

    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 &#37;. 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.

 

 

Similar Threads

  1. I Need Customer To Pay Half Now Half Later
    By TesterServers in forum Managing Customers and Orders
    Replies: 15
    Last Post: 6 Nov 2012, 12:43 AM
  2. left and right side box links different
    By irishshopper in forum Basic Configuration
    Replies: 3
    Last Post: 15 May 2011, 08:39 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR