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
Topic Author
Offline
Premium Member

7 years 10 months ago #5345 by a511197

Code to change Bootstrap Template navigation menu was created by 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

Please Log in or Create an account to join the conversation.

a511197
Topic Author
Offline
Premium Member

7 years 10 months ago - 7 years 10 months ago #5346 by a511197

Replied by a511197 on 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

Last edit: 7 years 10 months ago by a511197.

Please Log in or Create an account to join the conversation.

ronm
Offline
Administrator

7 years 10 months ago #5347 by ronm

Replied by ronm on 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/

The following user(s) said Thank You: a511197

Please Log in or Create an account to join the conversation.

Fay
Offline
Elite Member

7 years 10 months ago #5348 by Fay

Replied by Fay on 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

The following user(s) said Thank You: a511197

Please Log in or Create an account to join the conversation.

Fay
Offline
Elite Member

7 years 10 months ago #5349 by Fay

Replied by Fay on topic Code to change Bootstrap Template navigation menu

Ron beat me to it!

Please Log in or Create an account to join the conversation.

a511197
Topic Author
Offline
Premium Member

7 years 10 months ago #5350 by a511197

Replied by a511197 on 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

The following user(s) said Thank You: helenmd

Please Log in or Create an account to join the conversation.

Moderators: JohnSmith

Time to create page: 0.139 seconds

Code to change Bootstrap Template navigation menu

Main Pages

Quick Links

Support

External resources