Logo and navigation hamburger on same line

Hi,

I’m trying to line up the logo and navigation hamburger on mobile and tablet devices, rather then being split over two lines. Logo to the left, nav to the right. I can’t seem to get it to line up on all devices.

I would like the central line of the hamburger to line up with the central point of the logo. I have added some CSS code and it looks great on mobiles viewing as portrait but splits over two lines when in landscape. On a tablet viewing as portrait the hamburger doesn’t line up, and the logo gets too small when in landscape. Can you help?

The website is pippajackson.co.uk

The CSS code I have added is:

	@media only screen and (max-width: 767px){
  .btn-menu {
    float: right;
    margin: -33px 10px 10px 10px !important;
  }

  #mainnav-mobi {
    top: 20px !important;
  }
}
	@media only screen and (max-width: 480px){
  .site-header .col-md-4.col-sm-8.col-xs-12 {
    width: 85%;
  }

Hello there,

Please try this CSS code:

    @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: -50px;       
      }        

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

Let me know how it goes.

Stay safe.
Have a nice day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks for your help with this.

I’m still having the same trouble when you rotate a mobile phone to landscape the logo and nav go over 2 lines.

On a tablet the nav hamburger is still sitting too high.

I have included all my CSS code below just so you can see if it is all ok.

Cheers, Andrew

@media only screen and (max-width: 1024px) {
    .site-header {
        background-color: #002b49 !important;
    }
}
#mainnav-mobi {
    background-color: #5fd0df;
}

#mainnav-mobi ul.sub-menu {
    background-color: #5fd0df;
}

.site-footer {
    display: none;
}
.footer-widgets {
    padding-top: 70px;
    padding-bottom: 0px;
}
@import url('https://fonts.googleapis.com/css?family=Varela+Round');

@media only screen and (max-width: 1024px) {
  .slide-inner {
    top: 50%;
  } 
  .text-slider .maintitle {
    font-size: 40px;
		letter-spacing: -0.02em;
    line-height: 60px;
  }
  .text-slider .subtitle {
    font-size: 24px;
		letter-spacing: 0.02em;
    line-height: 38px;
  }


@media only screen and (max-width: 480px) {
  .slide-inner {
    top: 55%;
  } 
  .text-slider .maintitle {
    font-size: 34px;
		width: 90%;
		letter-spacing: -0.02em;
    line-height: 33px;
  }
  .text-slider .subtitle {
    font-size: 13px;
		letter-spacing: 0.02em;
    line-height: 40px;
  }  

@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: 85%;
        position: relative;
        z-index: 2;
      }

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

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

Hello there,

Please provide us screenshots to the issues you’re seein on your devices, so I can easily get what the cause.

Stay safe.
Have an excellent day ahead :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

This is how it looks (see screen shot) on a iPhone when rotated to landscape, you can see it spreads over two lines rather than staying on one. Looks perfect when in portrait.

Cheers,

Andrew

With a tablet (see screen shot) the nav hamburger doesn’t line up in portrait, it sits too high and in landscape the logo shrinks to a much smaller size.

Thanks for you help with fixing these issues.

Cheers,

Andrew

In addition, on the contact page is there a way to put a gap on the right side to match the left, as the info boxes run right to the edge?

Cheers,

Andrew

Hello Andrew,

To address the mobile menu issue as explained, try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width: 992px) {
  .site-header .header-wrap .btn-menu {
    margin-top: 6px;
  }  
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .site-header .header-wrap .btn-menu {
    margin-top: 16px;
  }
}

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

  .site-header .header-wrap .col-md-4 {
    max-width: 85%;
    float: left;
    text-align: left;
  }  
  .site-header .header-wrap .col-md-8 {
    margin-top: -50px;
  }
  .site-header .header-wrap .btn-menu {
    float: right;
    margin-right: 15px;  
    margin-top: 8px;
  }
  .site-header .header-wrap #mainnav-mobi {
    top: 60px;
  }
  
}

I hope this reply helps.

Stay safe.
Have a nice day :slight_smile:

Regards,
Kharis
aThemes Support

For your contact form padding, the option is on your row styles. You may set the right padding from there.

You could also use add this extra CSS code to Additional CSS.

@media only screen and (min-width: 460px) {

  .elementor-page-444 form.wpcf7-form p {
    padding-right: 2rem;
  }

  .elementor-page-444 form.wpcf7-form p input,
  .elementor-page-444 form.wpcf7-form p textarea {
    max-width: 100%;
  }

}

Regards,
Kharis
aThemes Support

Hi Kharis,

I’m afraid that hasn’t worked. The nav is dropping to the second line on mobile now.

Cheers,

Andrew

Hi Kharis,

With this I only seem to be able to control the padding on the message box on the right and not the other boxes for name, email, phone. I would like them all to line up.

Cheers,

Andrew

Hi Andrew,

Where did you put the code? Please check whether there is a line contains an error prior to the new code.

Try adding this CSS code:

@media only screen and (min-width: 460px) {

  .elementor-page-444 form.wpcf7-form .wpcf7-form-control-wrap,
  .elementor-page-444 form.wpcf7-form .wpcf7-form-control-wrap > * {
    max-width: 100% !important;
  }

}

Regards,
Kharis
aThemes Support

This is how the code looks, does is seem ok?

@import url(‘https://fonts.googleapis.com/css?family=Varela+Round’);

@media only screen and (max-width: 1024px) {
.site-header {
background-color: #002b49 !important;
}
}
#mainnav-mobi {
background-color: #5fd0df;
}

#mainnav-mobi ul.sub-menu {
background-color: #5fd0df;
}

.site-footer {
display: none;
}
.footer-widgets {
padding-top: 70px;
padding-bottom: 0px;
}

@media only screen and (max-width: 1024px) {
.slide-inner {
top: 50%;
}
.text-slider .maintitle {
font-size: 40px;
letter-spacing: -0.02em;
line-height: 60px;
}
.text-slider .subtitle {
font-size: 24px;
letter-spacing: 0.02em;
line-height: 38px;
}

@media only screen and (max-width: 480px) {
.slide-inner {
top: 55%;
}
.text-slider .maintitle {
font-size: 34px;
width: 90%;
letter-spacing: -0.02em;
line-height: 33px;
}
.text-slider .subtitle {
font-size: 13px;
letter-spacing: 0.02em;
line-height: 40px;
}

@media only screen and (min-width: 992px) {

.site-header .header-wrap .btn-menu {
margin-top: 6px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.site-header .header-wrap .btn-menu {
margin-top: 16px;
}

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

.site-header .header-wrap .col-md-4 {
max-width: 85%;
float: left;
text-align: left;
}
.site-header .header-wrap .col-md-8 {
margin-top: -50px;
}
.site-header .header-wrap .btn-menu {
float: right;
margin-right: 15px;
margin-top: 8px;
}
.site-header .header-wrap #mainnav-mobi {
top: 60px;
}

With the contact page it shifts the header and footer to the left but not the contact form boxes.

Hello there,

My apologies for the delay in response.

Try adding this CSS code:

    @media only screen and (min-width: 460px) {

      .elementor-page-444 form.wpcf7-form p {
        padding-right: 2rem;
      }

      .elementor-page-444 form.wpcf7-form p input,
      .elementor-page-444 form.wpcf7-form p textarea,
      .elementor-page-444 form.wpcf7-form p span {
        max-width: 100%;
      }

    }

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks for the reply. It still hasn’t worked for the contact form, just the same. I’m pasting in Customise > Additional CSS as additional code not replacing existing.

I’m still having the same issues with the header logo and menu lining up on mobiles when landscape and with tablets.

Cheers,

Andrew

Hello Andrew,

As we reached this phase, maybe you want me to fix the code directly from your end? If so, please send me a private message the working login credentials along with the site’s admin login URL.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

I have sent you a message.

Many thanks,

Andrew

Hi Andrew,

My apologies for the delay in response.

I wrote you a reply already to the direct message.

Let me know in case you haven’t yet received it.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support