Jump to content

Need instruction on moving The Horizontal Menu (blocktopmenu)

Steven-Hague
 Share

Recommended Posts

Steven-Hague Newbie

Steven-Hague

Posted
Posted (edited)

Here is my current shop http://www.abbeydomestic.co.uk/shop/

 

What I want to do, is move the horizontal menu outside of the <page> div into a custom div I will create for it just below where <top-holder> ends.

 

This is so that I can position it directly below (touching) the grey section above within a new div called <navigation-holder> which will have a width of 100% so I can fill either side of it with a background colour.

 

How do I move the position of the automatically generated menu, or how/where do I enter the code to display the menu elsewhere, The search bar, cart, CMS and other code seems to be within $HOOK_TOP instead of some html that can actually be moved easily.

Edited by Steven-Hague (see edit history)
Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

Hi Steven,

top-holder is not a default div. It's part of the theme.

To put it just below, you should probably set the top-menu at the top of the 'header' part.

 

Try this:

 

Edit file /modules/blocktopmenu/blocktopmenu.php

 

Add this function: (Maybe put it just before public function hookDisplayTop($params), but doesn't really matter )

 

public function hookDisplayHeader($params)
{
return $this->hookDisplayTop($params);
}
 
an save file.
This we do to make it possible to add the module to the header part.
 
 

Then go to back office and go to Modules->positions

and click transplant a module (top right)

Select module: "Top Horizontal Module"

Select hook into : DisplayHeader

save

 

Then go to Modules->positions once more.

Select : Show: Top horizontal menu

scroll all the way down to hook "Top of pages"

 

remove Top horizontal menu here.

 

Reload front page and see what it does.

 

pascal

 

 

 

N.B.

If you don't like it, or it doesn't do what you want, you can return to the original state:

go back to transplant a module and:

Add module: top horizontal pages

hook into : DisplayTop

Then go to Modules->positions once more.

Select: Show: Top horizontal menu.

Scroll down until you see the module in the header hook

Delete the module from the Header hook.

 

That should bring it back to the original state.

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

(Afterwards maybe yo need to play with some css to make it 100% wide

in file: /modules/blocktopmenu/css/superfish-modified.css

 

.sf-menu {

margin: 10px 0;

padding: 0;

width: 100%;                      <-- change this.

background: #383838;

}
 
Not sure if this is all, but this might do the trick.
pascal
Link to comment
Share on other sites
Steven-Hague Newbie

Steven-Hague

Posted
  • Author
Posted (edited)

It puts it up there http://www.abbeydomestic.co.uk/shop/

 

The position doesn't make sense, it's above

 

<link href="http://fonts.googleapis.com/css?family=Lato:400,700,300,400italic" rel="stylesheet" type="text/css">

 

Which should be in the <head>. The font still works though.

 

In header.tpl it traps the search, cart, user info login area and menu into something called {$HOOK_TOP}

 

Is there a way to make something like {$HOOK_HEADERNAV} where it only pulls in the horizontal menu? With only "Top Horizontal Menu" in it?

 

This way I could just change the header to be:

<div id="top-holder">
<div id="top">

<div id="top-menu">
<ul>
<li><a href="http://www.stellisonselectrical.co.uk/new/">Home</a></li>
<li><a href="http://www.stellisonselectrical.co.uk/new/">About Us</a></li>
<li><a href="http://www.stellisonselectrical.co.uk/new/">Euronics</a></li>
<li><a href="http://www.stellisonselectrical.co.uk/new/">Servicing</a></li>
<li><a href="http://www.stellisonselectrical.co.uk/new/">Warranties</a></li>
<li><a href="http://www.stellisonselectrical.co.uk/new/">Contact us</a></li>
<li><a href="http://www.stellisonselectrical.co.uk/new/">Whats new?</a></li>
</ul>
</div>

<div id="logo">
<a href="http://www.abbeydomestic.co.uk/shop/"><img src="../../../new/graphics/abbey-domestic.png" width="450" height="117" alt="Abbey Domestic" /></a>
<!--<h3><a href="">Abbey Domestic</a></h3>
<p>sales-spares-repairs</p>
<p>domestic appliance specialist</p>
-->
</div>

</div>
</div>
        
<div id="top-navigation-holder>
<div id="top-navigation">
{$HOOK_HEADERNAV}
</div>
</div>

        <div id="page" class="container_9 clearfix">
        
			<div id="header" class="grid_9 alpha omega">
				<div id="header_right" class="grid_9 omega">
					{$HOOK_TOP}
				</div>
			</div>

Where

<div id="top-navigation-holder>
<div id="top-navigation">
{$HOOK_HEADERNAV}
</div>
</div>

Is the new code, then just remove the existing horizontal navigation from {$HOOK_TOP}

Edited by Steven-Hague (see edit history)
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
 Share
Go to topic listing
×
×
  • Create New...