Is there a way to move the logo over on the mobile view only? Desktop looks good but on the mobile version the logo is interfering with the search icon.
1 Like
hi @RemisAE ,
can you please share the link your store, i will check and help you.
Could you provide me store URL? I should be able to answer your question.
Yours faithfully!
Please add below css code in bottom of assets/base.css file
@media screen and (max-width: 989px)
.header__heading-link {
margin-left: -60px;
}
Thank you.
hi @RemisAE ,
for this issue, i checked and see on mobile your logo be affect style of style desktop, so for solve that you can add the short code below at bottom in assets/base.css file:
@media only screen and (max-width: 767px){
.header__heading-logo{
width: 100%;
}
}
this is result after you change style:
Hope will can helpful to you!
- Step 1: Go to your Themes page. Navigate to Online Store > Themes. …
- Step 2: Click Edit code. In the Actions dropdown menu, click on Edit code to get to the code editor.
- Step 3: Find the Assets folder for CSS files and edit the base.css file.
Add the below style to the base.css file at the end
@media only screen and (max-width: 767px){
h1.header__heading {
margin-left: -40px !important;
}
}
I realized today that the change took on the homepage but not on the product page. Can you advise how to fix it there? Thanks!
- Step 1: Go to your Themes page. Navigate to Online Store > Themes. …
- Step 2: Click Edit code. In the Actions dropdown menu, click on Edit code to get to the code editor.
- Step 3: Find the Assets folder for CSS files and edit the base.css file.
Add the below style to the base.css file at the end
@media only screen and (max-width: 767px){
a.header__heading-link.link.link--text.focus-inset
margin-left: -90px !important;
}
}
I tried this but it only changed it on the main home page. The logo still looks incorrect on product pages and the cart page.
