Solved

Customize Navigation Mobile Dawn

Day204
Excursionist
34 0 8

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!

 

IMG_5830.jpeg

 

 

 

I make pretty things.
Accepted Solution (1)
GemPages
Shopify Partner
5588 1261 1203

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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

oscprofessional
Shopify Partner
15834 2369 3072

@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

oscprofessional_1-1674619635660.png



Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

GemPages
Shopify Partner
5588 1261 1203

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

GemPages_0-1674626895793.png


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 - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Day204
Excursionist
34 0 8

@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. 

 

IMG_5830.jpeg

 

IMG_5842.jpeg

 

I make pretty things.
GemPages
Shopify Partner
5588 1261 1203

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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Day204
Excursionist
34 0 8

@GemPages Thank you so much!

I make pretty things.
GemPages
Shopify Partner
5588 1261 1203

I am so glad that my solution can help.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1785 3050

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>

 

PageFlyVictor_0-1674635475004.png

 

<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