On an iPad the menu appears next to the logo

Hi,

I’ve applied the below code to make the header transparent. It works perfectly fine on mobiles and desktops. On an iPad, the menu button appears next to the logo “left side of the of the header instead of the right side”.

Website URL: http://fitnesswithaoife.com/

CSS Code:

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

  .site-header{
    background-color: transparent !important;
    height: 0 !important;
    padding: 0 !important;
  }
 
  
  .site-header .row,
  .site-header .container,
  .site-header .col-md-4{
    height: 0;
    overflow: visible;
  }
  
  .site-header .row{
    position: relative;
  }
  
  .site-header .col-md-4{
    margin-bottom: 0;
  }
  
  .site-header .col-md-4,
  .site-header .col-md-8{
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 99999;
  }    

  .site-header .col-md-8{
    position: absolute;
    top: 120px;
    left: 0;
  }

  .header-wrap .col-md-4{
    text-align: left;
    margin-bottom: 0;
  }
  
  .site-header .col-md-8 {
      position: absolute;
      top: 78px;
      left: 0;
  } 

.header-wrap .site-logo {
    margin-top: 20px;
  }  

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

Hello there,

Please try adding this CSS code:



@media only screen and (min-width:768px) and (max-width:1024px) {
  
  .site-header .col-md-8 { 
     left: auto;
     right: 0;
  }  
  
}

Regards,
Kharis

It works. Thanks!

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