Change the way navigation with image appears on mobile

Store Design
, , ,
1

Hi,

I have this navigation with image section in my website, that I’m using as a header for aesthetic purposes

I like the way it looks on desktop (side by side), but when on mobile it puts the logo above the text.

Is there a way i can change this using code so that it would appear like on the desktop version?

my site is:

https://xtradumb.com/

Thanks!

2

@kswag777

Hello,

You want to look like this?

shreyhweb_0-1682187134906.png
shreyhweb_0-1682187134906.png386×933 186 KB

If your answer Yes then please add the below code above in theme.liquid

online store >> edit code >> theme.liquid

@media screen and (max-width: 992px) { section.navigation-with-image{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } section.navigation-with-image .bg-scheme-background .relative{ align-items: center!important; } }
3

Hi @kswag777

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.min.css

@media screen and (max-width: 767px) {
.navigation-with-image{
grid-template-columns: repeat(2,minmax(0,1fr))!important;
}
.navigation-with-image .bg-scheme-background .relative{
align-items: center!important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly