Responsive Menu

[Rahim]

Hi Harry.
Good time. Hope you are fine.
As always first of all I need to thank you for your great support. 🙂

Harry,
If you check my Website you will see that my menu has many words.

At the width of 1190px my menu goes from 1 row to 2 ( The last word on the left goes to the second line )
I would like to have the hamburger menu ( Mobile Menu ) for width less than 1190px , but in the range of 1189px till 1024px the menu is some how broken.
And I have the mobile menu for pxs less than 1024 while I have set Responsive Breakpoint to 1190px.

How Can I fix this?

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Don’t have any device have resolution is 1190px so don’t worry about this.

But if you want you can use below code

@media only screen and (max-width: 1190px) {
	.visible-1024 {
		display: block;
	}
	.header-5 .visible-1024 {
		cursor: pointer;
		font-size: 40px !important;
		right: 10px;
		z-index: 1011;
	}
	.top-menu.visible-1024 {
		left: 0;
		top: 0;
		z-index: 999;
		background: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}
	.admin-bar .top-menu.visible-1024 {
		top: 32px;
	}
	.top-menu.visible-1024 i {
		font-size: 28px;
	}
	.top-menu.visible-1024 i.fa {
		font-size: 14px;
	}
	.top-menu.visible-1024 + #jas-content {
		margin-top: 70px;
	}
	.header-lateral #jas-wrapper {
		padding-left: 0;
	}
	.visible-1024.top-menu .start-md {
		text-align: center;
	}
	.header-5 {
		left: -250px;
		margin-left: 0;
		transition: all .5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	}
	.header-5::before {
		left: -250px;
		margin-left: -250px;
		transition: all .5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	}
	.menu-opened .header-5,
	.menu-opened .header-5:before {
		left: 0;
		margin-left: 0;
	}
	.hidden-sm {
		display: none;
	}
	.visible-sm {
		display: block;
	}
	.visible-sm.flex {
		display: flex;
	}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

Thank you for the code.

Yeah you are right. In the real we don’t have such a device with this resolution!

But I found this some how bug when I exited my browser from the maximum size!

The size of the browser was some where in the broken menu’s width!

So I decided to prevent this again!

I will check the code.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

Harry,

I checked the code.

In the width less than 1190px, it needs some rtl fixes!

the logo, the icons and the hamburger menu and the pop up of hamburger menu needs fix!

It’s not the same as the default responsive at the width of 1124px!

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Could you take a screenshot with describe about this?

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

The code that you gave me, makes the changes between the width of 1024px till 1190px.

If you consider the below images is taken at the width less than 1024px which doesn’t need any RTL fix :

Width : 950px

But the below images is taken at the width more than 1024px ( where the css that you gave me starts acting ) and as you see the logo, hamburger menu, mini cart pop up and icons are not like the width less than 1024px.

They should be exactly same as each other but they are not.

Width : 1050px

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Could you send me the admin account again, i try old account but can’t access your site.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

This reply has been marked as private.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

And I think that max width 1190px should be changed to 1191px.

Because at the exact width of 1190px the last word of menu on left goes to second line!

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change prev code to

@media only screen and (max-width: 1191px) {
	.visible-1024 {
		display: block;
	}
.jas-push-menu-btn {float: left;}
	.header-5 .visible-1024 {
		cursor: pointer;
		font-size: 40px !important;
		right: 10px;
		z-index: 1011;
	}
	.top-menu.visible-1024 {
		left: 0;
		top: 0;
		z-index: 999;
		background: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}
	.admin-bar .top-menu.visible-1024 {
		top: 32px;
	}
	.top-menu.visible-1024 i {
		font-size: 28px;
	}
	.top-menu.visible-1024 i.fa {
		font-size: 14px;
	}
	.top-menu.visible-1024 + #jas-content {
		margin-top: 70px;
	}
	.header-lateral #jas-wrapper {
		padding-left: 0;
	}
	.visible-1024.top-menu .start-md {
		text-align: center;
	}
	.header-5 {
		left: -250px;
		margin-left: 0;
		transition: all .5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	}
	.header-5::before {
		left: -250px;
		margin-left: -250px;
		transition: all .5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	}
	.menu-opened .header-5,
	.menu-opened .header-5:before {
		left: 0;
		margin-left: 0;
	}
	.hidden-sm {
		display: none;
	}
	.visible-sm {
		display: block;
	}
	.visible-sm.flex {
		display: flex;
	}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

Thank you for the answer.

The code is not working fine. Now the responsive menu at the width of 1024px is broken.

You can have a look.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add the code and take a screenshot about issue on 1024px screen.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Sorry Harry
I am going to show the web to someone , that is why I made the code as a comment. I will send you the screenshot later.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

Hi Harry,

Now the code is active.

If you reduce the width of your browser from full screen till the px less than 1024, you will see what I mean!

This much better than sending screen shot.

But remember in the RTL mode, the hamburger menu should be on right with its opening pop up and the icons should be on left!

Rahim Vaziri
CEO & Founder at Look.ir

[Author]

Posts