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
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 7 ans 10 mois #5345 par a511197

Code to change Bootstrap Template navigation menu a été créé par 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

Connexion ou Créer un compte pour participer à la conversation.

a511197
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 7 ans 10 mois - il y a 7 ans 10 mois #5346 par a511197

Réponse de a511197 sur le sujet 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

Dernière édition: il y a 7 ans 10 mois par a511197.

Connexion ou Créer un compte pour participer à la conversation.

ronm
Hors Ligne
Administrateur

Plus d'informations

il y a 7 ans 10 mois #5347 par ronm

Réponse de ronm sur le sujet 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/

Les utilisateur(s) suivant ont remercié: a511197

Connexion ou Créer un compte pour participer à la conversation.

Fay
Hors Ligne
Membre elite

Plus d'informations

il y a 7 ans 10 mois #5348 par Fay

Réponse de Fay sur le sujet 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

Les utilisateur(s) suivant ont remercié: a511197

Connexion ou Créer un compte pour participer à la conversation.

Fay
Hors Ligne
Membre elite

Plus d'informations

il y a 7 ans 10 mois #5349 par Fay

Réponse de Fay sur le sujet Code to change Bootstrap Template navigation menu

Ron beat me to it!

Connexion ou Créer un compte pour participer à la conversation.

a511197
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 7 ans 10 mois #5350 par a511197

Réponse de a511197 sur le sujet 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

Les utilisateur(s) suivant ont remercié: helenmd

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: JohnSmith

Temps de génération de la page : 0.161 secondes

Propulsé par Kunena

Code to change Bootstrap Template navigation menu

Main Pages

Quick Links

Support

External resources