FAQ & Template Customization | Rhino - Documentation | JoomShaper


Updated Last: 12 January 2019

FAQ & Template Customization

How to change background color of sticky Header

By default white background color was used for whole header (with menu & logo inside). Although You can replace white color into any other by using custom CSS.

To use solid bg color color use:

#sp-header.menu-fixed {background: #FDD8BD;}

or background color with transparency level - more modern effect:

#sp-header.menu-fixed {background: rgba(254,213,185,0.7);}

If you would change background color, probably you need also change default color of default menu items. But only when header is scrolled down (sticky):

#sp-header.menu-fixed .sp-megamenu-parent > li > a,
#sp-header.menu-fixed .sp-megamenu-parent > li > span {color: yellow;}
/* ===== New color of active and hover menu item ==========  */
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {color: blue;}