Getting started
You can customize the style, look & feel of your navigation stuff using CSS. We've included some examples on this page. But first, here's how to get access to the CSS area:
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.
Customize the font & style used in all navigation
Access the CSS area using the instructions above, and then use the following code:
.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
Access the CSS area using the instructions above, and then use the following code:
[id^=navigation] > svg { color:#C717FF !important; }
Customize the Color of the Magnifying Glass Icon in the Search Field
Access the CSS area using the instructions above, and then use the following code:
[id^=navigation] > svg { color:#C717FF !important; }
Create a sidebar navigation instead of a top navigation
To do this, you'll need to add it into a HTML/JS block onto every page where you want the sidebar to show, like this:
Next, copy & paste the following code into the HTML block.
