Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

TOPIC: Code to change Bootstrap Template navigation menu

Code to change Bootstrap Template navigation menu 6 months 1 week ago #5345

  • Alison Christie
  • Alison Christie's Avatar
  • Offline
  • Senior Boarder
  • Posts: 78
  • Thank you received: 3
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
The administrator has disabled public write access.

Code to change Bootstrap Template navigation menu 6 months 6 days ago #5346

  • Alison Christie
  • Alison Christie's Avatar
  • Offline
  • Senior Boarder
  • Posts: 78
  • Thank you received: 3
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: 6 months 6 days ago by Alison Christie.
The administrator has disabled public write access.

Code to change Bootstrap Template navigation menu 6 months 6 days ago #5347

  • Ron Mitchell
  • Ron Mitchell's Avatar
  • Offline
  • Administrator
  • Posts: 500
  • Thank you received: 120
Hi Alison
try the following:
.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
The administrator has disabled public write access.
The following user(s) said Thank You: Alison Christie

Code to change Bootstrap Template navigation menu 6 months 6 days ago #5348

  • Fay
  • Fay's Avatar
  • Offline
  • Expert Boarder
  • Posts: 140
  • Thank you received: 43
Hi Alison,
Try these:
.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 administrator has disabled public write access.
The following user(s) said Thank You: Alison Christie

Code to change Bootstrap Template navigation menu 6 months 6 days ago #5349

  • Fay
  • Fay's Avatar
  • Offline
  • Expert Boarder
  • Posts: 140
  • Thank you received: 43
Ron beat me to it!
The administrator has disabled public write access.

Code to change Bootstrap Template navigation menu 6 months 6 days ago #5350

  • Alison Christie
  • Alison Christie's Avatar
  • Offline
  • Senior Boarder
  • Posts: 78
  • Thank you received: 3
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 administrator has disabled public write access.
The following user(s) said Thank You: Helen Davies
Moderators: John Smith
Time to create page: 0.274 seconds
Powered by Kunena Forum

Donate

Sponsor us

The Xerte Community is a volunteer-based organization. Please help us to continue that!