Picture of aaron quinn
how to add a logo to the navigation
by aaron quinn - Friday, 23 December 2016, 7:36 AM
 

this was done in the authoring tool using an exact copy of the vanilla theme. be aware: you will be modifying a core file, so this may adversely affect any of your courses that aren't set up for this. i don't know how to make an extension, or if this could even be one. maybe someone else could figure that out :)

w/o menu button

with menu button

 

1. add a div to the navigation.hbs - in this case, it is called "myNavLogo"

step 1

 

2. add these classes to the navigation.less - in this case "myNavLogo" and "myNavLogoIndent"

(i wrapped them inside .navigation-inner, which i also added)

step 2

 

3. add/remove .myNavLogoIndent from inside of navigation.js

(note: this is a modification to a core file, not a theme file)

step 3

 

4. add the image to "assets"

step 4

Picture of aaron quinn
Re: how to add a logo to the navigation
by aaron quinn - Friday, 23 December 2016, 8:36 AM
 

i'd like to point out that #3 is optional.

i only did it to remove the 20px if the back button was visible - that extra tiny gap made the spacing between the left edge, the back button, and the logo look uneven.

after using each of the three themes i have installed on each of the sample courses that i have created so far, nothing has broken due to the modification to the core file (navigation.js). from what i've read, this is because jQuery will never break on missing elements, and it looks like it's jQuery that's doing the adding and removing of the class.

cheers!