Make Opencart menu transparent

In previous post we have seen how to change footer of out of box opencart home page. In this post we will be play with style-sheets to customize default theme of Opencart. Although it seems to be a quite easy task it will give you approach on thinking process during customization of user interface. It will be greatly beneficial to you if you are not very familiar with customization of user interface.

There is one issue with default drop down menu of Opencart theme. If you see carefully it overlap to product image.


So, I though it will be good idea to make it transparent so that user will still be able to see full image of product.

First I have identified style class which is applied on that drop down. It appears to be “dropdown-menu” then I have looked for stylesheet where it is defined.

This class is defined in stylesheet.css located under

<Installation Directory>\root\mystore\catalog\view\theme\default\stylesheet

#menu .dropdown-menu {
    padding-bottom: 0;

I have modified as follow and checked output.

#menu .dropdown-menu {
	padding-bottom: 0;

It made menu transparent but not exactly like I wanted because fonts are also transparent and it is kind of not looking good.


So, I have looked for solution and this gives me exactly what I wanted.

#menu .dropdown-menu {
	padding-bottom: 0;
	background-color: transparent;

After above change my menu look like follow. Now it is transparent my fonts are as it is and I am also able to see product image properly.


Hope this gives you quick way to customize look and feel of your opencart store if you are just trying to play with it. Of course on large scale you want to go for your own theme and apply it to store.

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting.

Tags: , , , | Posted under OpenCart | RSS 2.0

Author Spotlight


I love opensource technologies working with those technologies from the time I have stepped in to the Software Industry. Alfresco CMS is my area of expertise. I have worked on various complex implementations which involved integration of Alfresco with other technologies, extensively worked with JBPM workflows and Webscripts.

Leave a Reply

Your email address will not be published. Required fields are marked *