Hide header button, enlarge navigation logo on mobile and lower mobile header

[GLSatellite]

I’m currently using the theme: DAWN

I’d like to have 4 things done:

1. Custom Button removed (Mobile only) - I’ve added the following code in the base.css, but I’d like to HIDE IT on mobile. How do I do this?

.header .header__inline-menu .list-menu > li:last-child > a{
background: #095448;
border-radius: 10px;
text-decoration: none !important;
padding-left: 30px;
padding-right: 30px;
color: #fff!important;
}
.header .header__inline-menu .list-menu > li:last-child > a span {
text-decoration: none;
color: #fff;
}
body .header__inline-menu .list-menu > li:last-child > a:hover {
background: #DDD7D3;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child {
padding: 0rem;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
background: #095448;
border-radius: 10px;
color: #fff!important;
justify-content: center;
}

2. Enlarge logo (Mobile only) - The logo on mobile is tiny, is there any way I can increase the size only on mobile?

3. Move Header Hero text lower (Mobile only) - As you can see, the Header’s Hero text is touching the navigation bar too much, how do I fix this to lower it so theres some padding on top but only for mobile, it’s perfect on desktop. I used the following code in the theme.liquid

1. {% if template == ‘index’ %}

4. .shopify-section-group-header-group.announcement-bar-section{

5. height: 5px;

6. }

7. .header-wrapper{

8. position: absolute;

9. width: 100%;

10. background: transparent;

11. }

12. .header-wrapper .header{

13. margin-top: 20px;

14. }

17. {% endif %}

18. There’s a slight outline seen on the first photo under the header. How do I hide this on both desktop and mobile?

The site URL and password are the following:

https://kanzen-farming.myshopify.com/

Password: kanzenfarming2024

Thank you so much for your help!

[Moeed]

Hey @GLSatellite

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

1. add this code to hide it on mobile

@media (max-width: 749px) {
li:has(a#HeaderMenu-bulk-order) { display: none; }
}

3. Us this code

(max-width: 749px) {
#shopify-section-template--18149511921896__image_banner .banner__box {
padding-bottom: 0px !important;
padding-top: 100px !important;
}
}

4. add this code

.image-with-text .global-media-settings {
border: unset !important;
}

[GTLOfficial]

Hello @GLSatellite
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
#HeaderMenu-bulk-order {
  display: none;
}
.banner__box.content-container.content-container--full-width-mobile.color-scheme-5.gradient {
  padding-top: 15rem;
}
.image-with-text__media.image-with-text__media--adapt.global-media-settings.background-transparent.media {
  border: none;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[GLSatellite]

Thank you so much! It worked well but unfortunately it also affected all the other image banner texts on mobile (Now there’s too much space on top of the text). Is there a way to fix them? Thank you so much!