The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Code to change Bootstrap Template navigation menu

a511197
Onderwerp Auteur
Offline
Premium lid

Meer

7 jaren 11 maanden geleden #5345 door a511197

Code to change Bootstrap Template navigation menu werd gestart door a511197

Hi Everyone,

I'm using a bootstrap template in v3.6 and looking to change the colours of the side navigation menu (I'm not a coder). I'm using the Flat: Blue & Grey theme and have added a different header and footer colour using Optional Properties.

Q. Does anyone have a snippet of code to change the default blue and the hover over colour for the side navigation menu in a Xerte bootstrap template?

Many thanks,
Alison

Easy if you know how;-)

If you can use Lego, you can use Xerte

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

a511197
Onderwerp Auteur
Offline
Premium lid

Meer

7 jaren 11 maanden geleden - 7 jaren 11 maanden geleden #5346 door a511197

Beantwoord door a511197 in topic Code to change Bootstrap Template navigation menu

Would really appreciate a response to my initial post if you are able to help out. I know this is something non-coding users will want to do at my institution.Is it possible to add an Optional Properties for the side navigation menu to change colour, hover over etc?

TIA
Alison

If you can use Lego, you can use Xerte

Laatst bewerkt 7 jaren 11 maanden geleden door a511197.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

ronm
Offline
Administrator

Meer

7 jaren 11 maanden geleden #5347 door ronm

Beantwoord door ronm in topic Code to change Bootstrap Template navigation menu

Hi Alison
try the following:

Code:

.bs-docs-sidenav > li > a {
    color: #ff000a; /*text colour*/
}

.bs-docs-sidenav > li > a:hover {
    background-color: #f89406;
    color: #ffffff; /*text colour*/
}

Obviously change the colour values to what you want.
HTH
Ron

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

De volgende gebruiker (s) zei dank u: a511197

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Fay
Offline
Elite lid

Meer

7 jaren 11 maanden geleden #5348 door Fay

Beantwoord door Fay in topic Code to change Bootstrap Template navigation menu

Hi Alison,
Try these:

Code:

.bs-docs-sidenav {
  background-color: green;
}

.bs-docs-sidenav > li > a:hover {
  background-color: red;
}

.nav-list > .active > a, .nav-list > .active > a:hover, .nav-list > .active > a:focus {
  background-color: pink;
}

Fay

De volgende gebruiker (s) zei dank u: a511197

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Fay
Offline
Elite lid

Meer

7 jaren 11 maanden geleden #5349 door Fay

Beantwoord door Fay in topic Code to change Bootstrap Template navigation menu

Ron beat me to it!

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

a511197
Onderwerp Auteur
Offline
Premium lid

Meer

7 jaren 11 maanden geleden #5350 door a511197

Beantwoord door a511197 in topic Code to change Bootstrap Template navigation menu

Many thanks Ron and Fay, really is appreciated, works a treat.

I need to spend more time coding.

If you can use Lego, you can use Xerte

De volgende gebruiker (s) zei dank u: helenmd

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith

Tijd voor maken pagina: 0.138 seconden

Gemaakt door Kunena

Code to change Bootstrap Template navigation menu

Main Pages

Quick Links

Support

External resources