Digital experiences for all disciplines
New Landing › How can we help? › Atelier › Sticky header text color
New Landing › How can we help? › Atelier › Sticky header text color
- This topic has 28 replies, 6 voices, and was last updated 8 years by David Martin – Support.
-
Posted in: Atelier
-
July 17, 2015 at 2:15 pm #195649
Hi!
How do I change the color of text Sticky header?
I use black text, in a header.
My “Sticky header” is black, and I would like the text to be white for him.July 17, 2015 at 2:15 pm #195650This reply has been marked as private.July 17, 2015 at 2:39 pm #195663Hi,
Add the code below to your custom css option.
.page-header-naked-dark span.menu-item-text { color: #FFF!important; }
-Rui
July 17, 2015 at 2:44 pm #195672Thanks,Rui.
What about the logo change to white in a “Sticky header”?
July 17, 2015 at 2:48 pm #195673That’s an image, you need to change the Dark Logo image in the Theme options-> Logo
https://www.dropbox.com/s/07nujk3n0z4acu4/Screenshot%202015-07-17%2014.47.32.png?dl=0-Rui
July 25, 2015 at 5:15 pm #197697This reply has been marked as private.July 25, 2015 at 6:08 pm #197703This code works.
It is possible to reduce the code?#header-section .is-sticky #header.sticky-header span.menu-item-text { color: #FFF; } #header-section .is-sticky #header .header-right a { color: #FFF; } #header-section .is-sticky #header .header-left a { color: #FFF; } #header-section .is-sticky #header a.menu-bars-link span { background: #FFF; } #header-section .is-sticky #header a.menu-bars-link span:before { background: #FFF; } #header-section .is-sticky #header a.menu-bars-link span:after { background: #FFF; } #header-section .is-sticky #header .aux-item:first-child:after{ color: #FFF; }
July 27, 2015 at 12:44 am #197831Try this one
#header-section .is-sticky .menu-item-text { color: #FFF; } #header-section .is-sticky #header a { color: #FFF; } #header-section .is-sticky a.menu-bars-link span { background: #FFF; } #header-section .is-sticky a.menu-bars-link span:before { background: #FFF; } #header-section .is-sticky a.menu-bars-link span:after { background: #FFF; } #header-section .is-sticky #header .aux-item:first-child:after{ color: #FFF; }
-Rui
December 9, 2015 at 9:45 am #234087How to change bg of sticky header to transparant?
December 9, 2015 at 11:28 am #234128Hi,
@pp2324 – Please provide website url always to get exact css code.
Thanks
MohammadDecember 9, 2015 at 11:30 am #234129This reply has been marked as private.December 9, 2015 at 11:39 am #234140Hi
You want it fully transparent? May be hard to see the text
– Kyle
December 9, 2015 at 11:42 am #234144Hi,
I can see product with sticky header transparent. Just check the attachment.
Thanks
MohammadAttachments:
You must be logged in to view attached files.December 9, 2015 at 11:44 am #234148Hi there,
Thanks for your reply. Please see the attached image that it’s still White before you scroll down.
Attachments:
You must be logged in to view attached files.December 9, 2015 at 11:54 am #234159Add this to your custom css:
.single-product .header-wrap { position: absolute; width: 100%; top: 0; }
However not sure why you would want to do that as it looks messy. I’d say just make your header background the same color as the product page background
– Kyle
-
Posted in: Atelier
You must be logged in and have valid license to reply to this topic.