Results 1 to 9 of 9

Hybrid View

  1. #1
    Join Date
    May 2009
    Posts
    25
    Plugin Contributions
    0

    Default Space Between Header and Navigation Bar

    I am brand new to zen cart. I am having trouble customizing my site. I have added my custom header image no problem. I have moved the navigation bar below the header. The only problem is there is a white space between the header and navigation bar. I have tried some suggestions from the forums with no luck. Here is a link to my site to see the space.

    www.greengosling.com

    Thanks so much.

  2. #2
    Join Date
    Aug 2006
    Location
    UK
    Posts
    449
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    My first comment is that you have 2 stylesheets loading...

    style2.css
    layout.css

    dupllicate definitions may clash and give you problems.

    The white line between your logo and navbar is part of the image... either edit your picture of make the div 139 pixels high...
    ~Steve~

  3. #3
    Join Date
    May 2009
    Posts
    25
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    Thanks so much for the reply Steve. I am new to web site creation in general so thanks so much for the heads up on the 2 style sheets. In my previous post I did not give you the link to my shop but to my home page. There is a big space between header and navigation bar on my shop page.

    www.greengosling.com/shop

    I am going to try and figure out how to merge those 2 style sheets into one.

    Thanks again.

  4. #4
    Join Date
    Aug 2006
    Location
    UK
    Posts
    449
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    First the links you have in the nav bar are white, and do not show on the white background;
    stylesheet.css (line 384)

    #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    color:#FFFFFF;
    margin:0;
    padding:0 0.5em;
    text-decoration:none;
    white-space:nowrap;
    }

    Get yourself Firefox with the Firebug extension - the perfect combination for CSS troubleshooting.

    The space below your header is caused by a br tag in your tpl_header.php template file.. You will need to edit the file and delete the line...

    .....
    <div id="taglineWrapper">
    <div id="tagline">TagLine Here</div>
    </div>
    </div>
    <br class="clearBoth"/>
    ~Steve~

  5. #5
    Join Date
    May 2009
    Posts
    25
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    Thanks so much again Steve.

    I am having a little trouble with my navigation bar. If you look at my homepage (www.greengosling.com) you will see I have an arrow hover on the links on the navigation bar. I am having trouble duplicating that on the shop page (www.greengosling.com/shop).

    Thanks for any information regarding this.

    You have been a tremendous help so far.

    Thanks again.

  6. #6
    Join Date
    Aug 2006
    Location
    UK
    Posts
    449
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    With Firefox and the addon Firebug; and with a little practice, you should be able to identify the areas in the stylesheet that need to be adjusted.

    Edit your stylesheet.css

    I would suggest removing all references to #navMain and then adding the CSS;

    Code:
    #navMain ul {background:#444 url(../images/bg-menu.png); color:#fff;border-bottom:1px solid #808080;border-top:1px solid #808080;list-style-type:none;margin:0;padding:0;width:100%;}
    #navMain li {float:left;width:auto;}
    #navMain a {color:#fff;display:block;padding:10px 5px;}
    #navMain a:hover {background:#444 url(../images/bg-menu-hover.png) bottom; color:#fff;}
    then adjust to suit...
    ~Steve~

 

 

Similar Threads

  1. Get rid of space between navigation bar and define text
    By xavier33 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 17 Mar 2012, 01:03 AM
  2. Remove empty space between header and navigation bar?
    By isabella90 in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 11 Jan 2010, 11:48 AM
  3. gap between header and navigation bar
    By kwong016 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 3 Jun 2009, 08:15 PM
  4. How do i make a space between my navigational bar and header bar
    By hoygs740 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 11 Sep 2008, 06:03 PM
  5. Space between navigation header and mainheader
    By bjmhistory in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 21 Feb 2007, 03:15 AM

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