Design Customising Tips | Indigo - Documentation | JoomShaper

Indigo

Updated Last: 21 November 2023

Design Customising Tips

How to add background color for the header

 To add background color for the header (Indigo - Default) you have to use custom CSS.

Example CSS code to make it solid mint green (no transparency):

#sp-header {height: auto; background: #03B993;}

mint bg color of header

Example CSS code to make it grey with small transparency:

#sp-header {height: auto; background: rgba(128,128,128,0.9);}

grey bg color of header

To change default background color for the header in status sticky (fixed) only from Navy blue to Red use:

#sp-header.header-sticky {background: rgba(238,35,55, 0.95); }

red bg color of header


How to remove lines from the header (menu)

Those white lines in the menu and around logo can be removed only by using a custom CSS code:

.sp-megamenu-wrapper > ul > li:not(:last-child) > a, 
.sp-megamenu-wrapper > ul,
#sp-header > div > .container-inner,
#sp-header #sp-logo {border: 0 !important;}
#sp-header #sp-logo::before, #sp-header #sp-logo::after 
{background-color: transparent;}

no lines in header


How to change the background color for the Bottom

The bottom background color you can change easily from Helix Options:
Layout Builder > Bottom > Row Options (Gear icon) > Style > Background Color : here  > Apply > Save

Do these same steps if you want to change the Footer background color or even use their background image.


 

more soon...