Single line header for mobile

  • Howdy – love Sydney, but i hate the way the header looks on mobile devices.

    We really need to have the header on mobile devices to be on a single line. I want the logo to be flush left, and the hamburger drop down menu to be flush right. Currently, no matter what size of logo i upload, the logo/text appears above the hamburger icon. Also, it would be great to have the logo resize when scrolling down or on mobile devices.

    Any help would be greatly appreciated. thanks!

Viewing 1 replies (of 1 total)

  • Hello there,

    Try adding this CSS code to Appearance > Customize > Additional CSS from 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: 80px !important;
  }

}

    To resize the logo image when scrolling, try adding this code: 

    
.float-header .site-logo {
  max-height: 60px;
}

    Regards,
    Kharis

Viewing 1 replies (of 1 total)
  • The topic ‘Single line header for mobile’ is closed to new replies.

Tags