Jump to content

Placing the main navigation


Recommended Posts

Hi,

 

I'm new to PrestaShop, I'm trying to create a custom template but I'm struggling a bit. I'm trying to create a layout very similar to the default layout with the cart in the top right of the page, then a full width horizontal menu underneath it.

 

My header has 3 columns, the first one with the logo, the second one with a phone number and the third one should hold the cart.

 

In my third column I've placed the {$HOOK_TOP} to enable me to add the cart here.

 

<!-- Header -->
  <div id="header" class="large-12 columns">
   <div class="row">

		<div id="logo" class="large-3 columns">LOGO HERE</div>

		<div id="contactus" class="large-3 columns">PHONE HERE</div>

		<div id="header_right" class="large-3 columns">
				 {$HOOK_TOP}
		</div>

   </div>
  </div>
<!-- /Header -->

 

The problem is the horizontal menu module wants to use the same hook, so I end up with the menu also crammed into the third column.

 

On the default theme the {$HOOK_TOP} is placed inside a div called 'header_right', which is a column on the right of the header. This allows the cart to be displayed on the top right like i'm trying to do.

 

However on the default theme the horizontal menu appears outside of this container - how does the default theme move the menu out of the 'header_right' column where the {$HOOK_TOP} is so that it can be placed under the header going full width across the layout?

 

Thank you

Link to comment
Share on other sites

hmm,

I thought the cart by default was in $HOOK_HEADER and the topmenu in $HOOK_TOP?

 

Maybe try something like this (and position cart block in 'displayHeader', and top horizontal menu in 'displayTop', if not done yet.

 

 

<!-- Header -->
  <div id="header" class="large-12 columns">
	   <div class="row">

				    <div id="logo" class="large-3 columns">LOGO HERE</div>
				    <div id="contactus" class="large-3 columns">PHONE HERE</div>
				    <div id="header_right" class="large-3 columns">
									 {$HOOK_HEADER}
				    </div>
				   {$HOOK_TOP}
	   </div>
  </div>
<!-- /Header -->

 

hope this helps,

pascal

Link to comment
Share on other sites

Thanks for the reply. I believe that {$HOOK_HEADER} is output between the <head> tags of the document.

 

It turns out I was looking at a slightly older version of Prestashop, it seems in that version it was done by adding </div> at the start of the navigation template, this closed the wrapper and started a new div.

 

In the latest Prestashop however they leave the navigation inside the wrapper and just style it to sit underneath the header.

 

None of these methods are really workable for me, so instead I have implemented a custom hook which I've called {$HOOK_NAVIGATION} which i've placed under my header and hooked the navigation module to.

 

As I'm working on a custom build and not a theme intended for distribution this works fine but if there's a better way out there I'd love to hear it.

 

Thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...