Boost in Moodle 4

Boost in Moodle 4

by Karl Goddard -
Number of replies: 4

Evening all!

I'm playing with a dev install of Moodle 4 (loving it, by the way) and I've got a really basic question regarding modifying Boost

I've tweaked a small amount of CSS to get it how I'd like, but I can't seem to change the color of the 'hamburger' menu icon.

A very elementary question I know! But could someone possibly point me in the direction of how to change it please? Any assistance would be appreciated

(I've gone with a dark top navbar, and would like the button /icon white!)

Regards

Karl

Average of ratings: -
In reply to Karl Goddard

Re: Boost in Moodle 4

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
How have you changed the colour of the navbar to dark as the bootstrap _variables.scss file already has both types stated and therefore with the correct application of classes in the navbar markup (in the Mustache file) then the icon should change?  Or have a custom one as essentially its an SVG, so in the 'scsspre' setting, then:

$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#fab' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
works (here for light) where I've made the 'bars' pink (#fab).

P.s. With navbar white to dark, then in navbar.mustache, did you change:

<nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
to:

<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
?
Average of ratings: -
In reply to Gareth J Barnard

Re: Boost in Moodle 4

by Karl Goddard -
Hey Gareth!

Thanks for the reply. I changed the top navbar colour via the Adv settings > Raw SCSS box in the Theme Settings.

I guess that this isn't the correct way to do things? If not, may i ask what the correct way is, please?
Average of ratings: -
In reply to Karl Goddard

Re: Boost in Moodle 4

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
There is no purely 100% right or wrong way, just the way that works until you discover its not the complete solution. My solution is the one I've posted with changing the CSS classes in the navbar (i.e. making use of what is there -> https://getbootstrap.com/docs/4.5/components/navbar/#color-schemes and  https://getbootstrap.com/docs/4.5/utilities/colors/).
Average of ratings: -
In reply to Gareth J Barnard

Re: Boost in Moodle 4

by Karl Goddard -
Thank you so much Gareth,

My knowledge of scss is minimal. With a bit of digging in the theme folder structure I amended the navbar.mustache file to get a dark background on the navbar!

I just need to amend the font colour and icon colour now smile
Average of ratings: -