Setting up the top navigation.

To edit the top navigation menu items we need to go into Admin -> Editable Content -> ThemeOne.Nav

In case you have new storefront you will find an example setup:

We can use the wysiwyg editor for amends and setting up links but it is advised to administer this menu in code view so we can avoid random code being added by the wysiwyg editor.

 

Clicking on the cog icon will toggle the code view inside you will find the following:

 

<ul class="dropdown dropdown-horizontal"><li><a class="dir" href="/">Home</a> </li><li><a class="dir" href="./">Products</a> <ul><li>Product 1</li><li>Product 2</li><li>Product 3</li><li>Product 4</li></ul></li><li><a href="/t/contact">Contact</a></li><li><a class="dir" href="http://www.infigosoftware.com" target="_blank" title="Infigo Software ">ISL</a></li><li><a class="dir" href="./">Help</a> <ul><li><a href="/t/conditionsofUse">Terms &amp; Conditions</a></li><li><a href="./">Privacy Policy</a></li><li><a href="./">FAQs</a></li></ul></li></ul>

this might seem scary to start with but we can clean it up real fast.

If you have at hand a html editor with paragraph formatting or beautify function than you can just paste the code in there.

if not just press enter before every "<li>" and after "</li>".

Before getting into the details of the setup please visit the following link that will explain list items and their structure.

http://www.w3schools.com/html/html_lists.asp 

and further please visit http://www.w3schools.com/html/html_links.asp to gain a basic understanding of links.

 

Now that we understand lists and links html there are just couple of details to be careful with and we are all set.

1. the class attribute is a must so the menu can maintain their looks

2. Creating a dropdown is just adding another unordered list into a list item  ( dropdown unordered list comes right after the link ) 

<ul class="dropdown dropdown-horizontal"

<li><a class="dir" href="/">Home</a></li>

<li><a class="dir" href="./">Products</a>

<ul>

    <li><a class="dir" href="/">Product 1</a></li>

    <li><a class="dir" href="/">Product 1</a></li>

    <li><a class="dir" href="/">Product 1</a></li>

    <li><a class="dir" href="/">Product 1</a></li>

</ul>

</li>

( be sure to close the list item after and not before adding the dropdown into it)

<li><a href="/t/contact">Contact</a></li>

<li><a class="dir" href="http://www.infigosoftware.com" target="_blank" title="Infigo Software ">ISL</a></li>

<li><a class="dir" href="./">Help</a>

    <ul>

    <li><a href="/t/conditionsofUse">Terms &amp; Conditions</a></li>

    <li><a href="./">Privacy Policy</a></li>

    <li><a href="./">FAQs</a></li>

    </ul>

</li>

</ul>

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk