[Resolved] Mobile header breakpoint

Home Forums Support [Resolved] Mobile header breakpoint

Home Forums Support Mobile header breakpoint

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #388075
    themedleb

    Hello there,

    I am using the mobile header, and I want to use it to start from 1330px, after copying the following CSS code (found in GeneratePress support forum for mobile header), on the desktop the menu looks normal, starting from 1330px the menu disappears and on mobile the menu appears again normally with mobile header feature/mode, is there a way to make the menu appears as mobile header starting from 1330px?

    By the way I’m using an RTL site.

    Thank you.

    
    @media( max-width: 1330px ) {
    	#site-navigation,
    	#sticky-navigation {
    		display: none !important;
    		opacity: 0;
    	}
    	#mobile-header {
    		display: block !important;
    		opacity: 1;
    		width: 100% !important;
    	}
    	.mobile-header-navigation.is_stuck {
    		box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
    	}
    	.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    		display: inline-block;
    		float: right;
    		clear: none;
    		width:auto;
    	}
    	#mobile-header .menu {
    		display: none;
    	}
    	.site-header {
    		display: none;
    	}
    	.mobile-header-navigation .mobile-header-logo {
    		float: left;
    		display: block;
    	}
    	.mobile-header-navigation .mobile-header-logo img {
    		position: relative;
    		vertical-align:middle;
    		padding: 10px;
    		display: block;
    		-moz-box-sizing: border-box;
    		-webkit-box-sizing: border-box;
    		box-sizing: border-box;
    	}
    	.nav-float-left .mobile-header-navigation .mobile-header-logo,
    	.rtl .mobile-header-navigation .mobile-header-logo {
    		float: right;
    	}
    	.nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
    	.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    		float: left;
    	}
    	.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    		position: relative;
    		float: right;
    	}
    	.rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    		float: left;
    	}
    	body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
    		position: absolute;
    		right: 0;
    		top: 0;
    	}
    	body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
    		left: 0;
    		right: auto;
    	}
    }
    
    #388109
    themedleb

    Oh and I am using the website in a localhost for testing purposes.

    #388168
    Leo
    Staff
    Customer Support

    Hi there,

    Unfortunately it’s hard to tell without seeing the site live.

    Any chance you have a live server to duplicate this issue?

    Thanks!

    #388183
    themedleb

    I will need to build the website online from scratch or duplicate the actual one if possible, I will see how to manage that and get back soon.

    Thank you Leo.

    #388204
    themedleb

    Here is the live website, please have a look at it, thanks.

    http://test.slashfusion.com/

    #388207
    Leo
    Staff
    Customer Support

    Hmm weird. Can you try disabling all non-GP plugins?

    #388214
    themedleb

    Yes I did, still no menu, can I send you my credentials to get in and have a look at it? If yes, where?

    #388219
    Leo
    Staff
    Customer Support

    Hmm I still see Elementor activated?

    #388221
    themedleb

    I did deactivate it with it’s Pro plugin (all plugins deactivated except GP Premium) but still no menu, but because the website looked horrible without Elementor lol, I activated it again.

    #388423
    Tom
    Lead Developer
    Lead Developer

    Can you try adding this CSS?:

    #mobile-header .menu-toggle {
        display: block;
    }
    #388428
    themedleb

    Hi Tom,

    After trying the CSS code you gave me, the menu icon (hamburger) appeared but -1- when it’s opened the menu items are not RTL (everything is LTR) -2- there is no search icon.

    #388807
    Tom
    Lead Developer
    Lead Developer

    Add this in there as well:

    .mobile-bar-items {
        display: block;
    }
    
    .rtl #generate-slideout-menu .slideout-menu>li {
        text-align: right;
    }
    #388844
    themedleb

    Great, now all what’s left is a conflict on the search icon when the website is on desktop resolution, after adding the last code you gave, it started showing two search icons stacked, one is RTL and the other one is LTR (flipped), and of course I only need the RTL one.

    Thank you.

    #388927
    Leo
    Staff
    Customer Support

    Can you try this additional CSS?

    .main-navigation li.search-item i {
        transform: none;
    }
    #388935
    themedleb

    Perfect, thank you Leo and Tom, much appreciated.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.