Customize horizontal top menu

[guillerone]

Hello everyone!

 

I need to customize my horizontal top menu with a couple of changes:

 

- I need to add a custom link inside a CMS category link. As you can see in the image (sorry, Spanish) I have a CMS category called "Atención al cliente" and inside that I have CMS articles. I want to add another link, right after "Devoluciones" that points to the store locator page. How could this be done? The inbuilt menu manager does not provide much customization

 

- I need to disable the CMS category link. In the same attached image, if you click in "Atención al cliente" it will take you to a page that lists the articles in that category ("Devoluciones", "Aviso legal"...). How can I disable the link in the parent category so users can´t click over it? It should only act as a dropdown menu

 

I had a look at the forums and Googled a lot but could not find how to do this, but I'm pretty sure i'm not the first one to need this.

 

Thank you very much in advanced for any help you can provide! I would owe you a beer

[guillerone]

Please, anyone??

[guillerone]

[papertraitors]

Hello Guillerone,

 

We ran into a similar issue recently when trying to add a link to a blog in the top nav and blog category options in the sub nav options. After working with (and of course 'Googling') for a solution using the admin panel none was found. So into the code we went.

 

If you're familiar with creating an override file in your theme skip down to the red text, if not then follow these steps.

 

In your file structure you'll find a list of folders:

cache

classes

config

...

...

...

translations

upload

webservice

 

in that list you'll only need to access two folders

1. modules

2. themes

 

First, go to 'modules/blocktopmenu', here are the files for the top menu extension. locate 'blocktopmenu.tpl' and copy this file.

Next, go to 'themes' folder and here you should have your own theme folder and the default theme folder.

(If you only have default you can copy 'default' and paste it in 'themes' then rename it to what you want to call your own theme. be sure to update the back office with your new theme.)

 

Go into your theme folder and create a 'modules' folder in it.

Go into the newly created 'modules' folder and create a new folder 'blocktopmenu'.

Paste 'blocktopmenu.tpl' in this new 'modules' folder.

 

You now should have themes/[your theme name]/modules/blocktopmenu/blocktopmenu.tpl

 

Edit blocktopmenu.tpl

 

In the file you'll see where the navigation is being built.

 

 

<div class="sf-contener clearfix">

<ul class="sf-menu clearfix">

{$MENU}

{if $MENU_SEARCH}

... search menu code here ...

{/if}

</ul>

 

 

you'll want to insert your custom navigation code inside the unordered list <ul> tag.

for example (new code in blue):

 

<div class="sf-contener clearfix">

<ul class="sf-menu clearfix">

{$MENU}

{if $MENU_SEARCH}

... search menu code here ...

{/if}

<li><a href="/">Devoluciones</a>

<ul>

<li><a href="/">Aviso legal</a></li>

<li><a href="/">Cuidado del Calzado</a></li>

<li><a href="/">Fidelizacion</a></li>

</ul>

</li>

</ul>

 

 

Just be sure to update your hrefs with the links to your home page.

www.GuilleroneWebsite.com/devoluciones/fidelizacion.php becomes

<li><a href="/devoluciones/fidelizacion.php">Fidelizacion</a></li>

 

since you don't want the top level nav element to be a link just remove the anchor so your new code would look like this:

<li>Devoluciones

<ul>

<li><a href="/">Aviso legal</a></li>

<li><a href="/">Cuidado del Calzado</a></li>

<li><a href="/">Fidelizacion</a></li>

</ul>

</li>

 

Note: the draw back to this approach is that your custom navigation element can be either first in your navigation or last

 

Hopefully this helps, feel free to send a note if it raises more questions.

 

Regards,

Paper Traitors

Edited December 20, 2012 by papertraitors (see edit history)

[guillerone]

Wow.

Thanks a lot for the time you took to provide this acurate answer, I'll start working on that right away. Hopefully this will be visible for others that have the same requierment, which I'm guessing are not a few.

 

Again, thanks a lot!

[rajj]

Hi!

 

I am using PS 1.6.0.9 version and default-bootstrap theme.  I want to change the Top menu bar background color.

 

And also like to show the Category list on the Home page.

 

Please help me.

 

Thanks