Results 1 to 9 of 9
  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~

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

    Default Re: Space Between Header and Navigation Bar

    I am driving myself crazy with the navigation bar. I still cannot seem to get rid of a space between my header image and navigation bar. Removing the "clearboth" definitely made the space smaller but it is still there. I have edited my image to get rid of the slight space at the bottom.
    I am also having real difficulties with trying to get the navigation bar on my shop page to have the same hover arrow as my normal pages. I have tried matching things with Firebug. That is a really cool tool. What is wierd too now is that the navigation bar on my shop page looks different in IE and Firefox.

  8. #8
    Join Date
    Jun 2009
    Posts
    7
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    I'm having the same issue. It appears to be with the default install. There is a "break clearboth" between the logo area and the horizontal category area that generates the space. I just need help identifying what template file this is in so it can be overridden.

  9. #9
    Join Date
    Aug 2009
    Location
    Alpharetta, GA
    Posts
    10
    Plugin Contributions
    0

    Default Re: Space Between Header and Navigation Bar

    I'm having the same issue. It appears to be with the default install. There is a "break clearboth" between the logo area and the horizontal category area that generates the space. I just need help identifying what template file this is in so it can be overridden.
    Mary, I just had the same issue and I removed the "<br>clearbroth" code from the file and it went away. the file that it is located in is the templates/template_defaults/common/tpl_header.php it took me a lot of searching to find the fix and that definitely got rid of my space.

 

 

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