Solved

LOGO ON TOP OF DROP DOWN MENU - MOBILE VIEW - DAWN THEME -

ReggieBaby
Excursionist
43 0 10

ReggieBaby_0-1679367958779.png

 

 

How do I move the logo slightly to the right so that it is not ontop of the menu?

 

The logo and menu drop down works fine on the homepage but not any of our other pages

 

The logo is perfect on desktop view. 

 

Thank you 

 

Reggie

 

www.reggiebaby.com.au

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

hi @ReggieBaby 

 

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-1679368334280.png

 

PageFlyVictor_1-1679368334070.png

 

<style>

@media screen and (max-width: 767px){

header.header.header--middle-left.page-width.header--has-menu {

    display: grid;

    grid-template-areas: 'left-icon heading icons';

    grid-template-columns: 1fr 2fr 1fr !important;

}

}

</style>

 

Hope this answer helps.

Best regards,

Victor | PageFly

View solution in original post

Replies 3 (3)

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

hi @ReggieBaby 

 

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-1679368334280.png

 

PageFlyVictor_1-1679368334070.png

 

<style>

@media screen and (max-width: 767px){

header.header.header--middle-left.page-width.header--has-menu {

    display: grid;

    grid-template-areas: 'left-icon heading icons';

    grid-template-columns: 1fr 2fr 1fr !important;

}

}

</style>

 

Hope this answer helps.

Best regards,

Victor | PageFly

GemPages
Shopify Partner
5588 1261 1203

Hello @ReggieBaby 

I would like to give you the recommendation to support you so kindly follow steps below:

 

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before </body>

 

{% unless template contains 'index' %}
<style>
@media(max-width:768px){
header > a.header__heading-link{
margin-left: 0px !important;
}
}
</style>
{% endunless %}

 

I hope the above is useful to you.
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

SAN_MSWEB
Shopify Expert
872 110 115

Hi @ReggieBaby 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

@media (max-width: 768px) {

h1.header__heading {margin-left: 50% !important; width: 28%;}

}




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin