Mobile Masthead

Hi again,

Sydney Pro question: How do we change widths of the Site Title and Nav Button areas on iPhone & iPad/Landscape? Our Site Title text is long and forces an extra line break on iPhone & iPad and drives the nav hamburger down to a second (or third) line of the masthead, which overlaps upper page and post text, and forces our home page CTA button down below the bottom of smaller mobile displays. If possible we want the masthead to be a single line on all devices / all viewing modes. Staging site is at <220ssp220.wpstagecoach.com>, using a child theme.

Thanks in advance,

Sam

Hello there,

Please add the following CSS snippet into your site’s additional CSS option (Appearance > Customize > Additional CSS).


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

  .header-wrap .container{
    text-align: left;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    margin-top: -50px;
  }  
  
  #mainnav-mobi{
    top: 19px; 
  }  
  
}

Regards,
Kharis

Hi Kharis,

Your CSS fixes the Masthead issue on the iPhone, but NOT on the iPad…

Thanks,

Sam

Hello there,

Try to replace max-width:767px to max-width:1024px.

Let me know how it goes.

Regards,
Kharis

Kharis, that’s worse, it pops the entire site title down a line – which effectively drives the hamburger up above the top of the page. iPhone looks good at 767 or below, iPad sucks no matter what the max-width value. Our site-title area is too narrow; the width of the left masthead column area should be wider, and the left column area with the nav button should be less wide. Thanks for sticking with this one…

Sam

Hi Sam,

Try adding the below CSS code:


@media only screen and (min-width:992px) and (max-width:1199px) {
  
  .site-header .col-md-4 {
    width: 40%;  
  }
  
  .site-header .col-md-8 {
    width: 60%;
  }
    
}

Let me know how it works.

Regards,
Kharis

Problem resolved. Thanks Kharis!

Sam