Shopify themes, liquid, logos, and UX
Dear sir, madam,
First I got the problem that it wasn't possible to overlay the main image behind the main menu. I got advise that I should adjust the code, so I added the following code in assets->theme.css:
.template-index .site-header {position: absolute;background: transparent !important;}
.template-index .site-header__mobile-nav {background: transparent !important;}
The problem is now solved if I open my website www.printjeskoning.nl on a computer, but now I don't see the main menu when opening the website on a mobile.
Could someone please help me?
Kind regards,
T
Solved! Go to the solution
This is an accepted solution.
Hi @Wijnen,
Please place this code at the end of theme.css
.mobile-nav-wrapper {
-ms-transform: none;
-webkit-transform: none;
transform: none;
position: absolute;
top: 100%;
left: 0;
background-color: var(--color-body);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
display: none;
overflow: hidden;
width: 100%;
}
.mobile-nav-wrapper.js-menu--is-open {
display: block;
z-index: 999;
transform: none !important;
}
.page-container {
transform: none !important;
}
Link to refer: https://prnt.sc/12pqlla
Hope this helps.
This is an accepted solution.
Hi @Wijnen,
Please place this code at the end of theme.css
.mobile-nav-wrapper {
-ms-transform: none;
-webkit-transform: none;
transform: none;
position: absolute;
top: 100%;
left: 0;
background-color: var(--color-body);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
display: none;
overflow: hidden;
width: 100%;
}
.mobile-nav-wrapper.js-menu--is-open {
display: block;
z-index: 999;
transform: none !important;
}
.page-container {
transform: none !important;
}
Link to refer: https://prnt.sc/12pqlla
Hope this helps.
User | RANK |
---|---|
119 | |
95 | |
77 | |
69 | |
38 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022