Skip to main content

Adding a Gradient to the Navigational Bar

It is possible to add a gradient to the navigational bar, thereby giving it a more modern look. For example, rather than having the navbar display a solid blue colour, it is possible to add a slight gradient from light to darker blue.

Step-by-step Guide

To add a gradient to the navigational bar:

  1. Go to https://www.colorzilla.com/gradient-editor/ and follow their instructions to generate the gradient of your choice
  2. Copy their resulting CSS
  3. Go to Site Administration > Appearance > Themes > English (or the theme of your choice) > Settings
  4. Go to the "Navbar styles" tab
  5. Paste the CSS from step 2 above in the "Nav Bar Gradient" text area at the bottom of the page
  6. Click on the "Save Changes" button

Important Notes

  • This setting overwrites the "menubkcolor" setting found in the same page.
  • For best results, we suggest you set the "menubordercolor" to one of the gradient's edge colors


JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.