Shopify themes, liquid, logos, and UX
Hi friends!
Could someone help me to customize the header of my mobile website www.day204clothing.com?. Photos are below and I am using Dawn.
I would like to make the following changes to the mobile hamburger navigation menu:
1) Remove the grey box and social icons from the bottom of the menu
2) Change the text size to 14px
3) Change the hover action from current grey rectangle to making text grey
4) Make the text bold in the navigation of the page you are on rather than grey rectangle
Please let me know if you have any questions, and I appreciate any help!
Solved! Go to the solution
This is an accepted solution.
Hi @Day204 ,
You could please try adding !important after color: grey of my code. It should be like that
color: grey !important;
Best regards,
GemPages Support Team
@Day204
Hello,
.menu-drawer__menu-item.list-menu__item.link.link--text.focus-inset {
background-color: transparent;
font-size: 14px;
font-weight: bold;
}
.menu-drawer__utility-links {
background-color: transparent;
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Like This
Hello @Day204 ,
It's GemPages support team and glad to support you today.
I would like to give you a recommendation to support you so kindly follow steps below:
1. Go to Online Store > Theme > Edit code of your current theme
2. Open your theme.liquid theme file
3. Paste the below code before </head>
<style>
@media(max-width: 767px){
.menu-drawer__utility-links {
display: none;
}
.menu-drawer__menu-item {
font-size: 14px;
}
.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
color: grey;
background: white;
}
}
</style>
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
@GemPages Thank you so much! Is there any way to make just the text turn grey when hovering/selecting it rather than the grey box appear behind it? Pictured below is what occurs when I press a link. I would like the text to turn grey.
This is an accepted solution.
Hi @Day204 ,
You could please try adding !important after color: grey of my code. It should be like that
color: grey !important;
Best regards,
GemPages Support Team
I am so glad that my solution can help.
Best regards,
GemPages Support Team
Hi @Day204
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag </body>
<style>
.menu-drawer__menu-item.list-menu__item.link.link--text.focus-inset {
background-color: transparent;
font-size: 13px !important;
font-weight: bold !important;
}
.menu-drawer__utility-links {
background-color: transparent;
}
</style>
Hope this answer helps.
Best regards,
Victor | PageFly
User | RANK |
---|---|
69 | |
65 | |
63 | |
53 | |
49 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023