Trying to make my header static

I'm trying to freeze my header at the top of the page while scrolling - the only thing I found was the following from another thread, which I inserted at the bottom of my style sheet but it didn't work -

.main_block {
height: 241px; overflow-y:scroll;
}

I obviously don't know what I'm doing here, can someone help me with the correct coding to make it do this, please.

Thanks once again, you guys always bail me out!!!!! You've been such a help on this site, thanks to you, I'm getting closer to a finished cart...

That is very unconventional - what are you trying to accomplish with that sort of change?

I just want all the information on the header bar to always be visible, as my page will be lengthy with product images, I don't want people to have to scroll back up to click on the links (Log In, My Account, Shopping Cart, Checkout) that are imbedded in the top bar.

I am not sure is it is possible with Zen, but maybe you could let the sideboxes automatically scrol down.

This can be don on "normal' sites. :dontgetit

Almost anything is possible with Zen Cart, but that doesn't mean you should do it.

How large is your header going to be? Would that real estate be better used for selling your merchandise?

Here's my main page - the rest is still under construction -

http://redkapworkwear.com/demo

Maybe I don't need that scroll effect, I just thought it would simplify things...

This works with a stock Classic template site:

**#headerWrapper {position:fixed; width:750px;}

#contentMainWrapper {margin-top:21em;}**

but not with your template, probably because of the intermediate divs.

Might give you someplace to start, though.

Also, position:fixed doesn't work in IE6.

Steve, you ALWAYS come through for me. Thanks so much, I'll work with this...

I have another issue, and that's in my products sub-category - my shirts are in a row, not a column. I've been through all the settings, can't seem to correct it.

I know there is a mod u can install to correct this issue, the column layout grid, but i'm using a cherry zen template for my build and the column layout grid is already built into the template, so i don't understand what i need to do.

here's a direct link - http://redkapworkwear.com/demo/index.php?main_page=index&cPath=10_11

Grrr. Do you have another category (or subcategory) that has more than one product in it, so we can see if the problem is across the board ?

I added another item to a sub-category so i would have two items, I have the same problem -

http://redkapworkwear.com/demo/index.php?main_page=index&cPath=14_15

How about the setting in Admin - Configuration - Product Listing - Product Listing - Layout Style ?

There is no layout style under admin/configuration/product listing - I have the following:

e Value Action
Display Product Image 1
Display Product Manufacturer Name 0 Info
Display Product Model 0 Info
Display Product Name 2 Info
Display Product Price/Add to Cart 3 Info
Display Product Quantity 0 Info
Display Product Weight 0 Info
Display Product Price/Add to Cart Column Width 125 Info
Display Category/Manufacturer Filter (0=off; 1=on) 1 Info
Prev/Next Split Page Navigation (1-top, 2-bottom, 3-both) 3 Info
Display Product Listing Default Sort Order Info
Display Product Add to Cart Button (0=off; 1=on; 2=on with Qty Box per Product) 1 Info
Display Multiple Products Qty Box Status and Set Button Location 3 Info
Display Product Description 150 Info
Product Listing Ascending Sort Order + Info
Product Listing Descending Sort Order - Info
Include Product Listing Alpha Sorter Dropdown false Info
Include Product Listing Sub Categories Image false Info
Include Product Listing Top Categories Image false Info
Show SubCategories on Main Page while navigating 1 Info

Display Product Image
Edit

Do you want to display the Product Image?

Date Added: 07/17/2010
Zen Cart:: the art of e-commerce

I thought maybe it was because I didn't have a sort order to the DISPLAY PRODUCT LISTING that it was showing vertically instead of in columns - so I gave it a sort order, didn't help :(

Here are my layout settings -

Column Width - Left Boxes 150px
Column Width - Right Boxes 150px Info
Bread Crumbs Navigation Separator  ::  Info
Define Breadcrumb Status 2 Info
Bestsellers - Number Padding   Info
Bestsellers - Truncate Product Names 35 Info
Bestsellers - Truncate Product Names followed by ... true Info
Categories Box - Show Specials Link true Info
Categories Box - Show Products New Link false Info
Shopping Cart Box Status 1 Info
Categories Box - Show Featured Products Link true Info
Categories Box - Show Products All Link false Info
Column Left Status - Global 1 Info
Column Right Status - Global 1 Info
Column Width - Left 150px Info
Column Width - Right 150px Info
Categories Separator between links Status 0 Info
Categories Separator between the Category Name and Count Info
Categories Separator between the Category Name and Sub Categories Info
Categories Count Prefix Info
Categories Count Suffix Info
Categories SubCategories Indent Info
Categories with 0 Products Status 0 Info
Split Categories Box True Info
Shopping Cart - Show Totals 1 Info
Customer Greeting - Show on Index Page 0 Info
Categories - Always Show on Main Page 1 Info
Main Page - Opens with Category 0 Info
Categories - Always Open to Show SubCategories 0 Info
Banner Display Groups - Header Position 1 Info
Banner Display Groups - Header Position 2 logo Info
Banner Display Groups - Header Position 3 Info
Banner Display Groups - Footer Position 1 Info
Banner Display Groups - Footer Position 2 Info
Banner Display Groups - Footer Position 3 Info
Banner Display Groups - Side Box banner_box SideBox-Banners Info
Banner Display Groups - Side Box banner_box2 SideBox-Banners Info
Banner Display Group - Side Box banner_box_all BannersAll Info
Footer - Show IP Address status 0 Info
Product Discount Quantities - Add how many blank discounts? 5 Info
Product Discount Quantities - Display how many per row? 5 Info
Categories/Products Display Sort Order 0 Info
Option Names and Values Global Add, Copy and Delete Features Status 1 Info
Categories-Tabs Menu ON/OFF 0 Info
Site Map - include My Account Links? No Info
Skip 1-prod Categories True Info
Use split-login page False Info
CSS Buttons No Info

And my index listing settings -

Show New Products on Main Page 0
Show Featured Products on Main Page 0 Info
Show Special Products on Main Page 0 Info
Show Upcoming Products on Main Page 0 Info
Show New Products on Main Page - Category with SubCategories 0 Info
Show Featured Products on Main Page - Category with SubCategories 0 Info
Show Special Products on Main Page - Category with SubCategories 0 Info
Show Upcoming Products on Main Page - Category with SubCategories 0 Info
Show New Products on Main Page - Errors and Missing Products Page 0 Info
Show Featured Products on Main Page - Errors and Missing Products Page 0 Info
Show Special Products on Main Page - Errors and Missing Products Page 0 Info
Show Upcoming Products on Main Page - Errors and Missing Products Page 0 Info
Show New Products - below Product Listing 0 Info
Show Featured Products - below Product Listing 0 Info
Show Special Products - below Product Listing 0 Info
Show Upcoming Products - below Product Listing 0 Info
New Products Columns per Row 3 Info
Featured Products Columns per Row 3 Info
Special Products Columns per Row 3 Info
Filter Product Listing for Current Top Level Category When Enabled 1 Info

If you don't have that option in Product Listing, the Column Grid mod isn't installed. When you installed the template, did you run the SQL patch that's included ?

i haven't a clue if I installed it or not, my memory retention is lousy, but i'm on it now like mayo on white bread! i "assumed" that because all of my categories were in columns that it the grid was active. that's what i get for "######"uming!

i'll do the patch and let you know. THANK YOU!!!!!!!!

Oh Stevesh, thank you so much for your suggestion how to make the header static. It didn't work for me exactly as it was given probably because I have already made a lot of changes to the CSS and have installed the Currencies/Languages mod and moved it together with Search within the logo, plus I have made a custom CSS drop down menu. All these additions, made it more difficult for me but, inspired by your code at the beginning of this thread and playing around, I managed to get it working with the following CSS:

#logo {position:fixed; width:900px;}
#tagline {position:fixed; width:900px;}
#navMainWrapper {position:fixed; margin-top:147px;width:900px;}
#contentMainWrapper {margin-top: 175px;}

You can see this in action if you go to the following very long page and scroll down: http://athenscollectibles.info/index.php?main_page=privacy

Now, on to the next task: how to make the footer static. I remember that I have seen a relative thread some time ago but could not find it although I have been searching the forums for the last 3-4 days. I know that it won't be easy again because I have inserted another CSS menu in the footer, but any hint to point me to the right direction will be much appreciated.

Even if you can't help with the footer, I thank you for all the ideas I've got from you so far either in direct replies to my questions or by reading your replies to posts. Thanks for everything! :smile:

Although I managed to make a static header as explained in my previous post, I dropped the idea as it took too much space and looked weird.

I would still want to go along with the footer though and the following code at the end of my style sheet makes it work perfectly with a small issue on Google Chrome only:

body {
        height:100%;
}
#contentMainWrapper {
        left:0;
        right:0;
        top:0;
        margin-bottom:120px;
}
.custommenu {
        position:absolute;
        width:900px;
        height:112px;
        bottom:0;
        left:0!important;
        right:0!important;
}
.legalCopyright {
        position:fixed;
        width:900px;
        height:12px;
        bottom:0;
}

Although everything works fine with the latest versions of IE, Firefox, Opera and Safari, the problem with Chrome is that it leaves a gap when the page is short. In other words, you see the body, a gap and the footer at the bottom of the browser window. With all other browsers, the body is extended to the beginning of the footer.

An example of the shortest page: http://athenscollectibles.info/index.php?main_page=gv_faq
And an example of a long page: http://athenscollectibles.info/index.php?main_page=privacy

Any ideas on what might be causing this and how to correct it please?

Although there was no reply to my previous post, I managed to get it working with the following code:

/* START - Static footer */

html, body {
        margin:0;
        padding:0;
        min-height:100%;
}

html {
        height:99%;
}
body {
        height:100%;
}
#mainWrapper {
        min-height:100%;
}
#contentMainWrapper {
        position:relative;
        min-height:100%;
        left:0;
        right:0;
        top:0;
        padding-bottom:120px;
}
#custommenu {
        position:absolute;
        width:900px;
        height:112px;
        bottom:0;
        left:0!important;
        right:0!important;
}
.legalCopyright {
        position:fixed;
        width:900px;
        height:12px;
        bottom:0;
}

/* END - Static footer */

I found a hint from Stevesh (again) in another thread that all wrappers above the contentMainWrapper should have a height:100%; and this was the end of my nightmare! I only changed the html height to 99% as the 100% produced a vertical scroll bar even on very short pages.

Very happy now, thanks! :laugh: