Mobile menu to the right, but not in line

[hcboe-im]

Hey guys.

This is a problem i can´t figure out. I have used this code to get tho logo to the left and the hamburger to the right. But it´s not in line. Se attached photo. Can you help me with this and also that the hamburger has the same margin to the right of it, same as the logo has.

    @media only screen and (max-width: 767px) {
        .header-wrap .row .col-xs-12:first-of-type {
            width: 60%;
        }

        .header-wrap .row .col-xs-12:last-of-type {
            width: 40%;
            position: static;
        }

        .header-wrap .row {
            position: relative;
        }

        #mainnav-mobi {
            left: 0;
        }
    }

link: http://rogerlarsson.com/

Can you please help me with this

[kharisblank]

Hi,

Thank you for contacting us about our theme, Sydney Pro. I am happy to help with your queries.

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .site-header .btn-menu {
        position: absolute;
        top: 0;
        right: 10px;
        margin-top: 0;  
      }
      .site-header #mainnav-mobi {
        top: 10px;
      }
    }

    @media only screen and (max-width: 560px) {
      .site-header #mainnav-mobi {
        top: 40px;
      }
      .site-header #mainnav-mobi {
        top: 60px;
      }  
    }

Let me know whether it helps or not.

Regards,
Kharis
aThemes Support

[hcboe-im]

This only looks good in landscape mode, see attachment

[kharisblank]

Hi,

Thank you for getting back.

What is your device’s resolution?

Regards,
Kharis
aThemes Support

[hcboe-im]

Oneplus 7T, 1080x2400 pixels

6.55 inches, 103.6 cm2 (~86.5% screen-to-body ratio)

[kharisblank]

Hi,

Try replacing the code I shared with this one:

    @media only screen and (max-width:767px) {
      
      .site-header .header-wrap {
        height: 75px;
      }

      .site-header .container {
        position: relative;
        z-index: 99999;
      }

      .site-header .col-md-4 {
        width: calc(100% - 60px);
        width: -moz-calc(100% - 60px);
        width: -webkit-calc(100% - 60px);
      }

      .site-header .col-md-4 { 
        position: absolute;
      }
      
      .site-header .btn-menu {
        margin-top: -13px;
        position: absolute;
        top: 50%;
      }
      
      .header-wrap .col-md-8 {
        margin-top: 37px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);    
      }
      
    }

Regards,
Kharis
aThemes Support

[hcboe-im]

Now I got his. Still looks good in landscape

[kharisblank]

Hi,

Try replacing the last code I suggested with this:

    @media only screen and (max-width:767px) {
      
      .site-header .header-wrap {
        height: 75px;
      }

      .site-header .container {
        position: relative;
        z-index: 99999;
      }

      .site-header .col-md-4 {
        width: calc(100% - 60px);
        width: -moz-calc(100% - 60px);
        width: -webkit-calc(100% - 60px);
      }

      .site-header .col-md-4 { 
        position: absolute;
      }
      
      .site-header .btn-menu {
        margin-top: -13px;
        position: absolute;
        top: 50%;
        right: 15px;
      }
      
      .header-wrap .col-md-8 {
        margin-top: 37px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);    
      }
      
    }

Let me know how that helps.

Regards,
Kharis
aThemes Support

[hcboe-im]

It is still not in line in a standing format. Just in landscape, is there maybe some other css that I have applied thats is a conflict?

[hcboe-im]

Hey Kharis, the site is about ready. Do you think we can have a solution on this? Really would be gr8