Tranparent navbar/menu only in certain devices

[Afonso_77]

Hello, I was wondering if someone could help me with this issue I have been having in my Shopify store. I wanted to make a transparent navbar for the main page, for all devices, with the exception of mobile. I was able to implement a solution with the following code:

In header.liquid:

{% if template == 'index' %}
<style>
#MainContent {
margin-top: -85px; //change the margin if needed
}
</style>
<style>
.transparent-header {
background: transparent !important;
}
</style>
{% endif %}

Then I wanted to create an If statement to make it only work in a certain resolution/device, but liquid doesn't allow that. If someone could give me a hand I would really appreciate it.

(Aditional info: I am using the Dawn theme)

Best Regards,

Afonso

[Afonso_77]

Also, the code I provided works great to remove the background from the navbar on all devices, feel free to use it!

[PageFly-Victor]

Hi @Afonso_77,

you can try using code

@media(min-width:1024px){
/* CSS for desktop device */
}
@media(max-width:1023px) and (min-width:768px){
/* CSS for tablet device */
}
@media(max-width:767px){
/* CSS for mobile device */
}
sticky-header,sticky-header*{background:transparent !important}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly 

[Afonso_77]

Hello, thanks for the quick reply, the code works, but I don't use a sticky header... If it is possible for you to provide the code for the nonsticky header I would really appreciate it.
Best Regards,

Afonso

[Afonso_77]

And just another question, the implementation you are suggesting needs new css code right? the liquid won't work there? That code would need to be added in base.css right?

[PageFly-Victor · Accepted solution]

you can use it on the theme.liquid with structure
example

{% if template == 'index' %}
<style>
@media(min-width:1024px){
#MainContent {
margin-top: -85px; //change the margin if needed
}
}
</style>
<style>
.transparent-header {
background: transparent !important;
}

</style>
{% endif %}

[Afonso_77]

Thank you for your job helping the community!

[PageFly-Victor]

You're most welcome, @Afonso_77  😊

I'm glad I can help you!