Header not seen on phone/tablet

hey guys,
can you help me with this one, I can see the text on the header on my computer but it is covered on the phone/tablet…how can i fix this?
thanks!!
www.sunset2sunrise.org

ok I think i figured it out but the header is huge on phone/tablet and normal on computer, can that be resolved? thanks again!

ok I think I figured it out, sorry
you guys are amazing and this forum is SO helpful!!!
thank you so much!!!

Hello there,

You might need to move the mobile menu button to be always at the right side of the header bar, so it won’t take too much height. Try adding the below extra CSS code to Appearance > Customize > Additional CSS from your site dashboard.


@media only screen and (max-width:767px){
        
  .header-wrap .container{
    text-align: left;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
  }  

  .header-wrap .col-md-4 {
    max-width: 90%;
    position: relative;
    z-index: 2;
  }

  .header-wrap .col-md-8 {
    margin-top: -80px;       
  }        

  #mainnav-mobi {
    top: 70px;
  }
  
}


Regards,
Kharis

thank you so much!!

one more thing
can I make the text on the first slider lower on the picture but only on the desktop version?

Hello there,

You’re welcome!

Add this extra CSS code:


@media only screen and (min-width:1025px) {
  
  .slide-inner {
    top: 63%;
  }
  
}

Regards,
Kharis

that looks amazing!! thank you so much!! you guys are awesome!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis