Start a new topic

TOC Navigation CSS

Can you please provide example CSS, and what styles are available, for the TOC Navigation?


Reference: https://www.shortpoint.com/shortpoints/toc/


On the above page, the TOC is shown with a blue-ish background for "First Chapter", and then that background rolls over any other heading as it scrolls, but keeps the on-hover gray. 


TOC backgrounds, font family/size, hover, active, etc.

TOP link size, color, family, etc.


Thanks.


Hello Chris, 


Thank you for your request. I will ask our experts to prepare some custom codes for you and will update you soon.


Kind Regards,

Oksana

Any word on this?

Haven't heard from anyone yet. 

Just checking in, haven't heard anything yet.

Hello Chris,

Thank you for your patience.

We have prepared some Custom CSS solutions for you.

There are 3 options: 
1. Change the color fo active TOC item and change the font family/size.
2. Change the color of inactive TOC item
3. Change the color of the text in inactive TOC item.


/* Active blue color TOC item */
.shortpoint-toc li.shortpoint-toc-focus a {
  background-color: #36a9e0;
  color: #fff !important;

 font-size: 20px;
 font-family: Verdana;
}

/* Hover on inactive TOC item */
.shortpoint-toc ul a:hover, .shortpoint-toc li a:hover {
    background-color: #eee;
}
/*Hover on inactive TOC item text color*/
.g1-content a:hover {
    color: #000;
}

 
Please let us know if it works for you.


1 person likes this
Login or Signup to post a comment