Disappearing Nav Bar in Template Layout

I have noticed that many modern websites have slightly different layouts on their homepages versus interior pages. In that some store homepages, now have a large image or slideshow in the middle. but if you click an interior page the layout can change a little. Usually a div or 2 that splits the content area.

I need a little help or some suggestions to help me achieve the type of template I am looking for.

For my template I am going to set up a header and footer with a menu bar on each. The top menu bar will have root categories, the bottom menu bar will link to the informational pages which will be EZ pages. This is not a problem I know how to do this. But on the homepage, informational pages (EZ Pages), checkout, create account, and all other non-category/catalog pages, I want one large content area for the information and/or images I add through EZ pages. So on these pages I know how to get this layout as I have a header and footer with included menu bars. Where it gets a little tricky is that when someone is in my category pages (or catalog) I want a left navigation bar to pop up that has shop by items. So i only want this shop by nav bar to show up when directly in the product view, category or catalog view.

You can see an example on this website here: http://www.nancymeyer.com/ On this homepage the center area is wide open for an image. If you click on any of the top category links, then another menu bar pops up that says: Shop by Size, Shop By Style, Shop By Designer, etc. This is what I want to do as well and what I am seeking help on. Now if you click the bottom menu bar an information bar pops up on the left. I don't want or need this information bar to show up on the left, I want the full context area for the information (or EZ Pages).

I am wondering if this can be done directly by CSS or if I have to have some PHP modifications. I would think that with PHP I could say: If in category pages, then show LEFT HAND SHOP BY BAR and this CSS rule so split this content area. Else show full context area and a different CSS rule that shows 100% area.

If I were creating these pages in Dreamweaver I would simply create 2 different templates. The homepage and interior pages and then for my category pages, create different CSS rules and split the content area layout. But I am not sure how to do this in a dynamic cart that seems to have one permanent template across the whole site.

Any suggestions would be greatly appreciated. I don't even know exactly where to start?

It could be as simple as adding one style sheet to control the main page and having all others match the original stylesheet.css.

Look in templates/template_default/css/CSS_read_me.txt. My suggestion would be to use page_name.css renamed as main_page.css.

After getting all the things set for every page, you'd just need to adjust the main_page.

You need to add a conditional to /includes/templates/your_template/common/tpl_main_page.php (copy it from /template_default/common/) to control when the left column is active. There are instructions in the comments at the top of the file.

You probably want a version like```php
if (($current_page_base == 'index' and $cPath != 0) or ($current_page_base == 'product_info')) {
$flag_disable_left = false;
} else {
$flag_disable_left = true;
}

For your footer menu, you might try EZ-Pages Footer Columns from Plugins. This is extremely flexible to create various links and other information without writing code.

OK. Wow I did not know that Zen Cart has this CSS flexibility, it must have been changed recently. So with CSS I can change my homepage and adjust my EZ pages to just show a the full context area. As far as the PHP coding and information that gjh42 provided, I should then be able to add a little PHP code to have this menu show. When I get to this point perhaps I will come back to make sure I put the right coding.

Now I just have to figure out how to get root categories in top nav bar, ez-pages in lower nav bar, and category structure (shop by) in the left hand nav bar. I will address these questions as soon as I get to them, as I may figure this out in the meantime. Thank you for the help.

You don't need to "figure out" how to get those things; they will be admin switches/settings, plus the PHP addition I posted to control when the left column shows. The stylesheet will be most useful in your case to set any differences you want in styling between pages.

If you want only the top categories in the header navbar, turn on the categories-tabs menu in Configuration > Layout Settings.
For footer ez-pages, turn on the ez-pages footer bar in Configuration > EZ-Pages Settings, or install EZ-Pages Footer Columns for more control over layout. (No ez-page links will show up until you have some set to appear in the footer, with a non-zero sort order.)
For the subcategory navigation, turn on the categories sidebox in Tools > Layout Boxes Controller.

For information, the CSS per-page stylesheet feature has been in core Zen Cart for six years or so; not exactly a recent addition:)

You will want to turn the right column off in Configuration > Layout Settings > Column Right Status - Global. Between that and the $flag_disable_left, the whole center of the page will be one column occupied by your content.

Thank you so much! You have helped me greatly and saved me a lot of time. I appreciate your effort ant time!