OpenCart Header Color Change CSS (Used in My OpenCart Tutorial)

Introduction

If you watched my OpenCart e-commerce store tutorial, you may want to change the default OpenCart blue header color to match your store branding.

In the tutorial, I demonstrated how to change the OpenCart header and category menu color using a small custom CSS snippet.

You can copy the same code below and paste it in your OpenCart theme.

Where to Paste This CSS

Follow these steps in your OpenCart admin panel:

  1. Go to Design
  2. Click Theme Editor
  3. Click Add
  4. Select the file common/header
  5. Scroll to the bottom and locate the closing </head> tag
  6. Paste the CSS just above the closing </head> tag
  7. Click Save

After saving, refresh your store page and the header color will change.

OpenCart Header Color CSS

Copy and paste the code below:

<style>

/* Active left category color */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #ff9800;
    color: #000000;
    border-color: #ff9800;
}

/* Top menu bar background */
#menu {
    background-color: #ff9800 !important;
    background-image: none !important;
    border-color: #ff9800 !important;
}

/* Top menu links text color */
#menu .nav > li > a,
#menu .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* Hover and active menu links */
#menu .nav > li > a:hover,
#menu .nav > li.open > a,
#menu .nav > li.active > a,
#menu .navbar-nav .nav-link:hover,
#menu .navbar-nav .nav-link:focus,
#menu .navbar-nav .nav-link.active {
    background-color: #e68900 !important;
    color: #ffffff !important;
}

</style>

How to Change the Color

You can easily change the store color by replacing the following values:

#ff9800
#e68900

For example:

  • Red → #ff0000
  • Green → #28a745
  • Blue → #007bff

Replace the color codes and save the file.

Related Tutorial

You can watch the full tutorial here:

How to Create an E-Commerce Store Using OpenCart with HostArmada

Recommended Hosting for OpenCart

If you are planning to start an OpenCart store, I recommend HostArmada hosting because it provides:

  • One-click OpenCart installation
  • Fast SSD cloud servers
  • Free SSL and daily backups
  • Excellent customer support

Read my full review here:

https://foenix.techfin2k.com/hostaramada-review-2026