Making a change?
You can test your CSS changes using the Boost_preview theme instead of editing your live theme. This will let you test ideas and practice without affecting live users or your current branding.
The Navigation bar is the main hub of your platform. It sits at the top of every page and is the main link back to the homepage, to see notifications and to present important links and actions.
In Moodle there isn't a toggle to easily change this colour, but with a little CSS it is not too difficult to change. Included below is the CSS which you can add to your platform to take control of how it displays. the `background` is the background colour and the `color` (spelt the American way) states the font colour. Most organisations opt to set their brand colour or white for the background colour then they set the text colour in a way to ensure it can be read easily.
In order to add CSS to your platform you can do so by visiting the additional Raw SCSS section of the Boost theme:
- Site Administration
- Appearance
- Boost
- Advanced Settings
- Raw SCSS
If you are not familiar with CSS you can reach out to the Helpdesk team to update this for you, or you can add a comment so you can know what to copy and paste. You can add a comment at the beginning and end of the CSS below
// Navigation Bar Colour Settings.
.navbar.fixed-top, .navbar.fixed-top a.nav-link, .navbar.fixed-top i.icon.fa-bell-o, .moremenu .nav-link:hover, .moremenu .nav-link:focus, .moremenu .nav-link.active:focus, .moremenu .nav-link.active:hover {
background:#FFF!important; // Background color of header.
color: #000!important; // Text Colour of Header. FFF White 000 Black
}
nav .dropdown-menu, nav .dropdown-menu .dropdown-item {
background-color:#FFF!important;// Background color of Top Menu Dropdown
color: #000!important; // Text colour of dropdown.
}
nav .dropdown-menu a:hover,
nav .dropdown-menu a:focus,
nav .dropdown-menu .dropdown-item:hover,
nav .dropdown-menu .dropdown-item:focus {
background-color:#eee!important; //hover background of dropdown menu.
color:#000!important; // Hover text color of dropdown menu.
}
.navbar.fixed-top .popover-region-container *{
color: #000!important; // Notification Header Font Colour.
}
.navbar.fixed-top .content-item-container.notification:hover * {
color: 000!important;
}
// Navigation Bar Colour Settings End.