Latest Articles
So far this was never an issue, there were problems with uploading modules via the installer because of the ftp connection but you could allways install ocmods without any issue. However, some .. Read More
People had this issue so many times I thought I would write a bit about it. The  types of issues with opencart's 2.x modification system that I identified so far are: 1. Old Vqmod .. Read More
This small tutorial will show you how to manually add custom links to the default top menu in opencart. If you dont want to go trough all the hustle and would like to be able to completly customize.. Read More
To enable seo urls in opencart navigate in admin to system > settings , edit the store and on the server tab of the store settings you will find "Use SEO urls", set it to yes. So far e.. Read More
All Articles

Add custom links in opencart top menu - opencart 2.x

This small tutorial will show you how to manually add custom links to the default top menu in opencart. If you dont want to go trough all the hustle and would like to be able to completly customize your top menu have a look at my Supermenu module.

To add a link to the default top category menu in opencart you will have to edit the file catalog/view/theme/yourtheme/template/common/header.tpl and if you have the default theme or some theme that didnt modify the top menu structure, in header.tpl the code of the top menu will look something like this:

<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
    </div>
  </nav>
</div>
<?php } ?>

You can add custom links before or after the opencart categories in the menu. In the above code you will see a custom link placed before the categories and one after, and using the same structure you can add more custom links by copy/pasting the line(s) and then modify the url and the name of the link.

<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li><a href="link-url">Link Name(before categories)</a></li>
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
        <li><a href="link-url">Link Name(after categories)</a></li>
      </ul>
    </div>
  </nav>
</div>
<?php } ?>

In case you have some ocmods installed, after adding the link go in admin to extension -> modifications and refresh the ocmod cache.

If you are using my news/blog module and you want to add a link to the blog headlines page to the top menu and you dont have supermenu , this is the way to do it.

Posted by Flo

Products related to this article

News / Blog V4.4 - V4.5 - extension for opencart text_reviews
Compatible: Opencart 1.5.2.x to 1.5.6.x + 2.0.1 - 2.0.1.1 - 2.0.2 - 2.0.3.1 - 2.1.0.1 - 2.1.0.2 - 2.2.0.0 - 2.3.0.0 - 2.3.0.2
$12.00
FlyOut Mega Menu module v3 text_reviews
Compatible: Opencart 1.5.2.x to 1.5.6.4 - 2.0.1 - 2.0.1.1 - 2.0.2 - 2.0.3.1 - 2.1.0.1 - 2.1.0.2 - 2.2.0.0 - 2.3.0.0 - 2.3.0.2
$15.00 $10.00
Super Mega Menu V2.4 - opencart module text_reviews
Compatible: Opencart 1.5.2.x to 2.0 - 2.0.1 - 2.0.1.1 - 2.0.2 - 2.0.3.1 - 2.1.0.1 - 2.1.0.2 - 2.2.0.0 - 2.3.0.0 - 2.3.0.1 - 2.3.0.2
$15.00 $12.00

Related Articles

This small tutorial will show you how to manually add custom links to the default top menu in opencart. If you dont want to go trough all the hustle and would like to be able to completly customize your top menu have a look at my Supermenu module. To add a link to the default top category menu in opencart you will have to edit the file catalog/view/theme/yourtheme/template/common/header.tpl and if you have the default theme or some theme that didnt modify the top menu structure, in header.tpl the code of the top menu will look something like this: <?php if ($categories) { ?&g..
1 comments on this article - view comments

5 Comments To "Add custom links in opencart top menu - opencart 2.x"

Sairan On 25 Jan 2017
Thanks, BRO! Super Super Super Reply to this comment
Flo On 22 Aug 2016
Its the same structure for the link, add it before: ***<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>*** or after ***<li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>*** Reply to this comment
Simpa On 22 Aug 2016
Thanks for this one! Do you have any turtorial how to put links in the gray top menu? (The menu where you find wishlist ect.) Reply to this comment
I Want One I Want One! On 27 Dec 2016
Hi Did you get a resolution with this top menu? We're trying to add links to ours and struggling! Thanks
ALI On 20 May 2016
Thank you so much you HELP ME. Reply to this comment

Write a comment

Your Name:


Enter the code in the box below:

Your Comment:
Note: HTML is not translated!