Nav bar colour on mobile devices
Permalink Browser Info Environment
Hello,
Could you please provide sample code to place in custom.dev.less to change the colour of the nav bar on mobile devices? (currently is grey and we would like it to be transparent or #1e1a1d)
Kindly,
Athan
Could you please provide sample code to place in custom.dev.less to change the colour of the nav bar on mobile devices? (currently is grey and we would like it to be transparent or #1e1a1d)
Kindly,
Athan
| Type: | Pre-Sale |
|---|---|
| Status: | Resolved |
Thank you for your reply.
I have enabled all the dark modes with no result. I have also placed the code you provided into custom.dev.less with no result either. If you open up our current live site on a mobile device (www.samsonandbulluss.com) you will see the constuction page with a dark grey blank nav bar at the top. (when using the mobile previews in C5, the ipad/tablet preview works the same as the desktop. All other device views still have a grey coloured nav bar instead of the colour we would like)
Kindly,
Athan
I have enabled all the dark modes with no result. I have also placed the code you provided into custom.dev.less with no result either. If you open up our current live site on a mobile device (www.samsonandbulluss.com) you will see the constuction page with a dark grey blank nav bar at the top. (when using the mobile previews in C5, the ipad/tablet preview works the same as the desktop. All other device views still have a grey coloured nav bar instead of the colour we would like)
Kindly,
Athan
It seems you intend to remove the 'coming soon' page header. In this case, just add this to your custom.dev.less file:
.page-template-coming-soon header { display: none; }
Hello,
It is not only on the coming soon page, but site wide. On all pages that have a dark header the colour is grey only on mobile devices and not desktop or tablet. The grey header doesn't look good against a black/coloured background on mobile devices. Is there a reason why the code you provided didn't affect the header on mobile devices?
Kindly,
Athan
It is not only on the coming soon page, but site wide. On all pages that have a dark header the colour is grey only on mobile devices and not desktop or tablet. The grey header doesn't look good against a black/coloured background on mobile devices. Is there a reason why the code you provided didn't affect the header on mobile devices?
Kindly,
Athan
What about this one:
@media (max-width: 991px) { #header { background-color: #1e1a1d!important; border-bottom: 0px!important; } }
That did it! Thank you.
Have you tried enabling the dark mode for the header in
Pixel Options> Header> Header> Dark & Dark Sticky
And if you still need a specific color, placing this piece in the 'custom.dev.less' should do the job: