Course Content

Customize Navigation Style with CSS

Murray Gray in Course Content

Nov 04, 2022 - 1 min read. Available on Growth plan or higher.

We've created some example CSS styles that will globally change the font that's used for your student membership site.

To get started:

  • Open any course and open the Course Settings section
  • Open the CSS sub-section
  • Set the Enable Custom CSS For This Course toggle to ON (green)
  • You should then see the CSS field appear. Add your CSS code to that box alongside any other code you may have already added to it.

Feel free to customize & change the examples below, remove what you don't need, or add in any new rules you want.

Change font style of all navigation items

.custom-navigation-item {
   font-family: arial;
   font-size: 17px;
   background: lightyellow !important;
   color:red !important;

Customize the Color of the Search Icon in the Navigation Bar

[id^=navigation] > svg { color:#C717FF !important; }

Customize the Color of the Magnifying Glass Icon in the Search Field

[id^=navigation] > svg { color:#C717FF !important; }

Lots of people found these next topics pretty useful...