Home › Forums › Space themes support forum › How to setup a different background color for sticky header
How to setup a different background color for sticky header
- This topic has 9 replies, 2 voices, and was last updated 1 week, 2 days ago by
Luke Nielsen.
-
AuthorPosts
-
May 8, 2024 at 7:15 am #563965
alegarciajuarez23ParticipantHello, I would like to have a different background color for the second row of the header when it is sticky, I see the way to have another logo but how can I configure a different background color?
Attachments:
You must be logged in to view attached files.May 9, 2024 at 10:28 am #564320
Luke NielsenKeymasterHello,
The other color for the sticky header can be defined via custom CSS code, e.g. try the below one:
.xts-sticked .xts-header-main .xts-general-header { background-color: #f1c2c2; }
Define it in Theme Settings -> Custom CSS.
-
This reply was modified 4 months ago by
Luke Nielsen.
May 9, 2024 at 10:29 pm #564546
alegarciajuarez23ParticipantThanks and how I can make the elements of the menu white?
Attachments:
You must be logged in to view attached files.May 13, 2024 at 4:40 pm #565237
Luke NielsenKeymasterHello,
At the moment I see that the site is in maintenance mode, could you please send me access to the admin panel in this case?
Thank you in advance.
Kind Regards
May 14, 2024 at 7:48 am #565338
alegarciajuarez23ParticipantHi these are the credentials
May 15, 2024 at 4:19 pm #565867
Luke NielsenKeymasterHello,
Use the code below for help:
/* MENU\SHEVRONS */ .xts-sticked .xts-general-header :is( .xts-nav-main > li > a, .xts-nav-secondary > li > a, .xts-header-el span ), .xts-sticked .xts-general-header :is( .xts-nav-secondary, .xts-nav-main ) > li > a:after { color: #FFFFFF; } /* STICKY MENU ITEM ICONS */ .xts-sticked .xts-general-header .xts-nav-img { filter: invert(1); } /* HEADER DIVIDER */ .xts-sticked .xts-general-header .xts-header-divider:before { border-color: #FFFFFF; } /* HOVER SECTIONS */ /* MENU\SHEVRONS */ .xts-sticked .xts-general-header :is( .xts-nav-main > li.current-menu-item > a, .xts-nav-main > li:hover > a, .xts-nav-secondary > li:hover > a, .xts-nav-shop-cat > li.xts-active > a, .xts-nav-shop-cat > li:hover > a, .xts-nav-mega > li:hover > a, .xts-nav-sticky-cat > li:hover > a ) { color: rgba(255, 255, 255, 0.8); } /* ACTIONS BUTTONS */ .xts-sticked .xts-general-header :is(.xts-header-el:hover .xts-header-el-icon, .xts-header-el:hover .xts-header-el-label) { color: rgba(255, 255, 255, 0.8); }
Thank you for your time.
Kind Regards
August 2, 2024 at 8:52 am #587486
alegarciajuarez23ParticipantHi, thanks it works perfectly on the desktop view, but how can I get the same result on mobile?, because on mobile, I first see the logo ok, but when the header changes to sticky layout the logo is not white so it is lost with the background color
Check the screenshot with the comparison, please
Attachments:
You must be logged in to view attached files.August 2, 2024 at 2:54 pm #587618
Luke NielsenKeymasterHello,
Please provide the full access for the admin panel – https://take.ms/LHN24
Thank you in advance.
Kind Regards
August 28, 2024 at 6:27 am #593060
alegarciajuarez23ParticipantThese are my admin cred
August 29, 2024 at 5:01 pm #593641
Luke NielsenKeymasterHello,
Thank you for your time.
It seems that access is invalid – https://take.ms/fHoMT
Please update it and let me know.
Kind Regards
-
This reply was modified 4 months ago by
-
AuthorPosts
- You must be logged in to create new topics. Login / Register