Move navbar from separate area to in-page element

[oxwivi]

Navigation bar occupies it's own space by default, I want it to become a part of the page instead of being separate.

 

This osCommerce template: freeoscommerce.com/demo2/?template=045 demo shows how I want it to be.

 

PS Is there a way to replace Top >> Catalog with simply Home?

[♥14steve14]

To move the navbar just cut the code from includes/header and paste into the to every page in your root or catalog foler, where you want it to appear. I expect someone will come up with a better way of doing it.

 

To remove the top from the header read the how do i post thats pinned to the installation forum.

[Guest]

@@oxwivi,

 

As with ALL commercial templates, I suggest you contact the template creator for support.

 

 

 

Chris

[oxwivi]

As with ALL commercial templates, I suggest you contact the template creator for support.

 

With respect, I'm not seeking support regarding the linked commercial template. I am quoting it as an example to show the desired results - a picture is better than a thousand words, as they say.

[oxwivi]

To move the navbar just cut the code from includes/header and paste into the to every page in your root or catalog foler, where you want it to appear.

 

Won't that retain that theme background (blue in the default theme)? I don't really like that, and would get rid of it if possible.

[multimixer]

You don't need to add that to every file, it will be enough if you move the part out of includes/header.php and into includes/template_top.php after the <div id="bodyContent">

 

I would however leave in in the header.php and modify the file accordingly so it gives the impression the whole thing is within the content (= same width as the content)

 

As for background etc, this has nothing to do with the location, you can wrap it into your own classes and style in css

[oxwivi]

I would however leave in in the header.php and modify the file accordingly so it gives the impression the whole thing is within the content (= same width as the content)

 

How so? I don't see any way to make it like it's besides the left column instead of above it.

 

 

As for background etc, this has nothing to do with the location, you can wrap it into your own classes and style in css

I only know it currently obeys jQuery UI themes.

[♥14steve14]

I knew someone would come with a better easier idea.

 

Looks like you have to go away and learn at least basic css.

[oxwivi]

After experimenting as multimixer suggested, I ended up with the breadcrumb in various positions, depending on where I placed the breadcrumb code.

 

I wanted the breadcrumb to be on line and between the boxes on either side of a given page, and the closest thing I achieved was by adding the breadcrumb code to the bottom template_top.php, and the result is attached.

 

Can it be fixed?

 

It is to be noted that other positions with different code placements did not appear broken in anyway. Without going into the exact details on how I got them, the other positions that worked were: top right corner with width limited to text, exactly on top, the same width as stock breadcrumb, and the stock position.

[♥kymation]

It looks like you left in the grid_24 class, so it's trying to be full width. Change that to grid_16 and see what happens.

 

Regards

Jim

[oxwivi]

It looks like you left in the grid_24 class, so it's trying to be full width. Change that to grid_16 and see what happens.

You were correct. I did as you suggested, and attached the revised screen shot.

 

Can it be made to align with the boxes on either side? The spacing is incorrect as well. :(

 

Anyway, thanks for the tip! I finally feel like it's going somewhere.

[♥kymation]

Yes, you can add some padding above the bar to push it down. I would start by adding in-line CSS to the containing div.

 

Regards

Jim

[oxwivi]

That take cares of it's vertical position, but what about the horizontal spacing issue? As you can see on the screen shot, the bar is closer to the right-side, and not explicitly in the middle. Or are you suggesting to use padding to push it to the left as well?

[multimixer]

I guess you have the whole thing wrapped into a grid_16 class.

 

Each grid_xy class is adding a margin of 5px (depending on the "gutter" you have in your 960gs css file) left and right.

 

The way to set the left or right margin to 0, is to apply additionally a "alpha" or "omega" class

 

In short, change the <div class="grid_16"> to <div class="grid_16 alpha"> , this should fix the issue.

 

If not, post the concrete code you use

[oxwivi]

@@multimixer, thanks! That worked perfectly. The noob-friendly 'in short' was also helpful specially since I had no idea how those stuff work.

 

This was added at the bottom of template_top.php:

<div class="grid_16 alpha ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

 

 

Now off I go to Google for div padding to push it down as @@kymation suggested. Speaking of which, if pushing it down somehow gets it overlayed on the text below, will it be fixed if I pad below as well?

[oxwivi]

Padding 5px perfect aligns it. For others seeking to move breadcrumb to the top of pages, here's how:

• Remove the following code from /includes/header.php:
  

<div class="grid_24 ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

• Paste the following code (slightly modified to fit between the boxes) at the end of template_top.php:
  

<div class="grid_16 alpha ui-widget infoBoxContainer padded">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

• To horizontally align the breadcrumb with the boxes, at the following before the </head> tag at template_top.php:
  

 <style>
div.padded {
  padding-top: 5px
     padding-bottom: 0px
}
 </style>

 

And the end result is the screen shot I attached. If you think the breadcrumb could do with a little more space before the text, you can change the padding-bottom value as you see fit.

[oxwivi]

Correction: padding-bottom does not help push down the elements below it. Someone in the know of these things, please suggest a solution.