How to change the submenu color in the OMF minimal theme

This article explains how to change the submenu colour of the OMF minimal theme (the gray on the screenshot below).



Please follow these steps to add the necessary code to your website:

  1. Go to OpenCart Admin>Extensions>Modules
  2. Click Edit for OpenCart Mobile Framework Administration
  3. Switch to the "Customization" tab
  4. From the following code snippets copy the ones that you would like to use:

    4.1. This changes the background color of the submenu (the light blue from your screenshot):

    #primary .nav > li ul {
       background: #your_submenu_color;
    }
    #primary .nav > li:hover {
       background: #your_submenu_color;
    }
    

    4.2. This changes the submenu text color of the submenu (if you change the submenu colour to white, you will need to change the text colour, too):

    #primary .nav > li:hover a {
       color: #your_submenu_text_color;
    }
    #primary .nav > li ul li a {
       color: #your_submenu_text_color;
    }
    
  5. Paste them in the "Custom CSS" box.

  6. The snippets use dummy values for colours. To change to the actual colours:

    6.1. Choose a colour in an online colourpicker
    6.2. Copy the colour code from the box at the top
    6.3. In the code snippets you copied in step 4, replace your_submenu_color (or your_submenu_text_color) with the colour code you copied. Note that you have to keep the hashtag(#).

  7. *If you need to change the main menu icons to gray, instead of white (if you change the submenu colour to white, you will need this)

    7.1. Copy the files /catalog/view/theme/omf2/images/sprite.svg and /catalog/view/theme/omf2/images/sprite.png to /catalog/view/theme/omf2-min/images
    7.2. Rename the newly copied files: /catalog/view/theme/omf2-min/images/sprite.svg to sprite1.svg and/catalog/view/theme/omf2-min/images/sprite.png to sprite1.png
    7.3. In the "Custom CSS" box paste this code:

    #primary .nav > li > a {
        background-image: url('images/sprite1.svg');
    }
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk