Docs

[elevatedconversions]

Hi, Support.

I would like to have my menu turn “hamburger” a little sooner than what it does. As soon as it hits around 1020 pixels (give or take) it will display “get in touch” on the second row and looks bad. This happens on most all iPads. I would like the menu to just collapse into the hamburger sooner instead of this happening.

Here is a screenshot of what I’m talking about: http://screencast.com/t/wpcB7G1UJ

Can you provide me with the necessary code to tweak this?

Thanks!

-Ryan

[Jade]

HI Ryan,

Please add this code in the customizer:

@media (max-width: 1081px) {
    .x-nav-wrap.desktop {
        display: none;
    }

    .masthead-stacked .x-btn-navbar {
        display: inline-block;
    }

}

@media (min-width: 1082px) {
    .x-nav-wrap.desktop {
        display: block;
    }

    .masthead-stacked .x-btn-navbar {
        display: none;
    }

}

Hope this helps.

[elevatedconversions]

This reply has been marked as private.

[Joao]

Hy Ryan,

On what device you are experiencing the issue?

I checked your website on my FireFox Android and the menu is centered and it opens.

Please clean your cache and test again,

Thanks

Joao

[elevatedconversions]

Hi, Joao.

I am experiencing this on tablets and desktop – testing it on the actual devices, incognito, and in browserstack.

I am using chrome and safari to test it. Both produce the hamburger menu way off to the left side and it doesn’t open at all…

Please advise the issue ASAP.

Thanks,

-Ryan

[Rupok]

Hi Ryan,

Kindly update the previous code to follwoing :

@media (max-width: 1081px) {
    .x-nav-wrap.desktop {
        display: none;
    }

.masthead-stacked .x-btn-navbar {
  display: block;
  margin: 12px auto;
  width: 26px;
}
.x-nav-wrap.mobile {
  display: block;
}
.x-nav-wrap.mobile.collapse {
  display: none;
}

}

@media (min-width: 1082px) {
    .x-nav-wrap.desktop {
        display: block;
    }

    .masthead-stacked .x-btn-navbar {
        display: none;
    }

}

Hope this helps.

[elevatedconversions]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css("display", "none");
		}
		else{
			$('.x-nav-wrap.mobile').css("display", "block");
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[elevatedconversions]

Thanks so much, Nabeel!

Best,

-Ryan

[Rupok]

You are welcome Ryan!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts