Mobile Nav Jumping and Opening off Screen

Hello!
Having an issue with the mobile nav.

  1. It jumps when scrolling on mobile/tablet
  2. I like the hamburger alignment, but the menu opens to the far right (off-screen). See screengrab.

Website: https://silverhillworcester.com/
Current Custom CSS:

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

	.site .site-header.fixed.float-header {
        position: fixed !important;
      }
.header-wrap .container{
text-align: left;
}

.header-wrap .btn-menu{
float: right;
margin-right: 15px;
margin-top: -10px;
	margin-bottom: 10px;
}
header#masthead div.col-md-4.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 0px 0px;
    }
}
.content-wrapper {
    padding-top: 0 !important;
}

.site-title {font-size: 28px}

Hello, it’s your additional CSS issue, you can try to disable it.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman!
The CSS is helping with other pieces (keeping the menu sticky in mobile, mobile alignment, font size, etc).

If there’s a way to clean it up and avoid the jumping/hamburger dropdown alignment issues I’m having, I’d love some advice!

Hello, you can leave this CSS code:

.content-wrapper {
    padding-top: 0 !important;
}

.site-title {font-size: 28px}

…but the rest is not good, unfortunately.

Kind Regards, Roman.
aThemes Support

Thanks Roman!
Are you able to help me find the code to make the menu sticky on mobile and align the way it currently looks? Working functionally? Since if I leave just that code in there, it does not work even how it should be default.

Hello,

Since if I leave just that code in there, it does not work even how it should be default.

Mobile header is always static by default, even if you select fixed. Because it can take too much space on mobile device in landscape screen orientation (especially if there is a tall logo image).

Are you able to help me find the code to make the menu sticky on mobile and align the way it currently looks? Working functionally?

You can try to use this CSS code instead of what you have there now:

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-4.col-sm-8.col-xs-12 {
        max-width: 72%;
    }
	
    header#masthead div.col-md-4.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 2px 30px;
    }

    header#masthead nav#mainnav-mobi {
        left: -194px;
        width: 250px;
    }

    header#masthead .btn-menu {
        margin-top: 0;
        line-height: 1;
    }

    header#masthead {
        position: fixed !important;
        padding: 15px 0;
        top: 0;
    }

    #content.page-wrap {
        padding-top: 55px;
    }
}

Kind Regards, Roman.
aThemes Support

Thank you Roman! This worked perfectly. You’re a wizard. I appreciate it :slight_smile:

1 Like

You are welcome! :slight_smile:

Kind Regards, Roman.
aThemes Support