Adapt Learning Community: image in navigation bar

Our client is asking for their company logo be put into the left side of the navigation bar.

Is this possible? If so, how?

Hello Robert

Are you using the authoring tool or are you creating courses directly in the framework?

Henrik

I am using the authoring tool.

The easiest way will be to style the navigation element through the authering tool's Custom CSS/LESS code field, which you will find under Project settings.

In it you just have to adress the class "navigation", for instance by writing something like:

.navigation{
    background-image: url(https://www.adaptlearning.org/wp-content/uploads/2016/01/nav_logo_white-alt-2-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 64px;  
}

Using the Custom CSS/LESS code field is a great way to experiment with the looks of your course.

When you are saticfied with the look, you can move the code from Custom CSS/LESS code field to a theme, and put the logo inside there too.

You can read more about themes here:

https://github.com/adaptlearning/adapt_framework/wiki/Styling-your-course

Show parent | Reply

Thank you so much. This is working. However I want to use one of the assets in my course:

src="course/en/assets/ec70c46ee82176af0d25163d7c010f6b1fa431fd.jpg"

How would I use an asset instead of a URL?

background-image: url(https://www.adaptlearning.org/wp-content/uploads/2016/01/nav_logo_white-alt-2-1.png);

Show parent | Reply

Assets are put into the course/en/assets folder.

So you'll just need to specify the path to this folder instead:

background-image: url(../../course/en/assets/ec70c46ee82176af0d25163d7c010f6b1fa431fd.jpg);

Show parent | Reply