Boost Navbar colours in 5.0

Boost Navbar colours in 5.0

by Bob Gilmore -
Number of replies: 4

Hey folks,

With 5.0 here, my previous post for changing the nav bar colour is no longer working (see https://moodle.org/mod/forum/discuss.php?d=450595).

I no-longer work with Moodle, having changed jobs, but I am keeping my old site active for the time being and wanted to keep its code up-to-date (and with no one using it, I can break it for a few days and no one will care!)

The following code is  ... kinda... tested in 5.0. Login, Language, Hamburger, title bar, sub menu and notifications all tested and working.

The main changes are the variable colour changes ( now --bs-* ) and some changes to the order and classes of elements. 

Colours are achieved with the --bs-primary variable for the background colour, set in the Boost theme General page and then --bs-light and --bs-dark for the rest. Switch as necessary to fix contrast with your own branding.

image.png

/* top bar changes */
nav.navbar {
   &.fixed-top { 
      background-color: var(--bs-primary) !important; 

      *:not( .dropdown-menu *, .popover-region-container * )  { color: var(--bs-light); }
      .popover-region-container { color: var(--bs-dark); }
      .nav-link {
         &:hover, 
         &:active,
         &:focus,
         &.active { background-color: var(--bs-primary); border-bottom-color: var(--bs-light); border-bottom-width: 3px; }
      }

      /* with the bar using --primary, this makes the edit custom control switch invisible when turned on. following two target this switch */
      .editmode-switch-form {
           input:checked { background-color: var(--bs-danger); }
           label:has(~ div > input:checked) { color: var(--bs-light) !important; }
      }

      /* Make sure the hamburger menus is the correct colour - change stroke values to match your scheme */
      .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
    }
}
Average of ratings: -
In reply to Bob Gilmore

Boost Navbar colours in 5.0

by Martin Bertsch -

Hi Bob,

thanks for your code. It works really well. However, I've noticed a difference between desktop and mobile appearance. Maybe you know how to fix this?

Desktop:

image.png

mobile:

image%20%281%29.png

BR

Martin

Average of ratings: -
In reply to Martin Bertsch

Boost Navbar colours in 5.0

by Bob Gilmore -
Huh, that's interesting.... 
 
The logo / site name on mobile view shows up in the site nav drawer.
 
image%20%282%29.png
Ive never noticed this before!
 
Adding the following CSS should fix it. The span, .btn selector gets the close button and the site name if you have no logo to display and the .btn:hover selector handles a narrow screen if the mouse is hovering over the button. You will want to tweak this colour as appropriate to your theme. 
 
#theme_boost-drawers-primary > .drawerheader { 
   background-color: var(--bs-primary); 
   span, .btn { color: var(--bs-light); }
   .btn:hover { color: var(--bs-dark); }
}

image%20%283%29.png

image%20%284%29.png

Average of ratings: -
In reply to Bob Gilmore

Boost Navbar colours in 5.0

by Martin Bertsch -

awesome. works very well.

how would you highlight the active link in the navbar? Therefore the text color also changes.

image.png

Average of ratings: -
In reply to Martin Bertsch

Boost Navbar colours in 5.0

by Bob Gilmore -

This selector in the original sample:

.nav-link {
   &:hover, 
   &:active,
   &:focus,
   &.active { background-color: var(--bs-primary); border-bottom-color: var(--bs-light); border-bottom-width: 3px; }
}

is where it's done. Ive got the background-color set to --bs-primary which is the brand colour in your theme (i.e. it doesnt change colour)

Changing the selector to something like:

.nav-link {
   &:hover, 
   &:active,
   &:focus,
   &.active { color: var(--bs-primary); background-color: var(--bs-light); border-bottom-color: var(--bs-primary); border-bottom-width: 3px; }
}

Should give the light background with the brand colour as the text and bottom border colours. You might want to use --bs-dark for the color and --bs-green for the border-bottom-color to better match your screenshot.

Average of ratings: -