Moodle 4 Boost CSS - change colors for Top Nav & Course index

Moodle 4 Boost CSS - change colors for Top Nav & Course index

by Anthony M -
Number of replies: 4


Hi all,  I am  playing with the browser console and css in a test site, I managed to change the background color to black for the Top Nav & Course index...

I am now trying to get rid of the litle white line pointed by the red arrow.

In the console I am trying with margin-top but it doesn´t work...




I would appreciate if anyone could advise here? 

Thanks a lot!



Average of ratings: -
In reply to Anthony M

Re: Moodle 4 Boost CSS - change colors for Top Nav & Course index

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Perhaps this CSS will work.

.navbar.fixed-top {
border-bottom: #000 1px solid;
}
Average of ratings: Useful (1)
In reply to Rick Jerz

Re: Moodle 4 Boost CSS - change colors for Top Nav & Course index

by Anthony M -
That worked! I appreciate Rick. Thanks a lot.
Average of ratings: -
In reply to Rick Jerz

Re: Moodle 4 Boost CSS - change colors for Top Nav & Course index

by Anthony M -
Maybe someone else would know how to change the color for hover over the links from black to white ?

See screenshot, the links are showing white in the course index (Item 1) I applied the next CSS code for that:

.courseindex .courseindex-item .courseindex-link, .courseindex .courseindex-item .courseindex-chevron {
  color: #ffffff;
}

but when I hover over an item in the menu (e.g: the link "General") it apply the black colour and it disappears (see item 2)...

* Sorry in case it´s something obvious and I am asking it.
Attachment Course Index Text Hover.png
Average of ratings: -
In reply to Anthony M

Re: Moodle 4 Boost CSS - change colors for Top Nav & Course index

by Anthony M -
Hi, finally to a code that seems to be working for the above in case anyone could need it...

.courseindex .courseindex-item .courseindex-link, .courseindex .courseindex-item .courseindex-chevron {
color: #fff;
}

.courseindex .courseindex-item .courseindex-link:hover, .courseindex .courseindex-item .courseindex-link:focus, .courseindex .courseindex-item .courseindex-chevron:hover, .courseindex .courseindex-item .courseindex-chevron:focus {
color: #fff;
text-decoration: none;
}



.drawer.drawer-left .drawertoggle {
color: #fff;
}



.courseindex .courseindex-section .courseindex-sectioncontent .courseindex-item {
padding-left: 0.5rem;
border-radius: 0;
}



.courseindex .courseindex-item:hover .courseindex-link, .courseindex .courseindex-item:hover .courseindex-chevron, .courseindex .courseindex-item:focus .courseindex-link, .courseindex .courseindex-item:focus .courseindex-chevron {
color: #fff;
cursor: pointer;
}
Average of ratings: Useful (2)