Home Forums Themes Support Claue Responsive Menu

This topic contains 13 replies, has 2 voices, and was last updated by  Rahim 9 months, 1 week ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #17973

    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

    #17976

    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

    #17977

    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

    #17979

    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

    #17986

    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

    #17991

    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

    #18014

    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

    #18029
    This reply has been marked as private.

    Rahim Vaziri
    CEO & Founder at Look.ir

    #18030

    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

    #18050

    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

    #18051

    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

    #18056

    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

    #18059

    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

    #18066

    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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.