Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #474468

    For a website, I have vertical navigation and a 5 column footer. ‘Normal mode’ looks well, and ‘Responsive mode’ also looks well. Only problem is that it switches ‘too late’ to the responsive mode. (The columns become too small).

    Is there any way to ‘tell’ the site to switch to responsive view in an earlier stage?

    #474539

    Hey sberendss!

    Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px.

    Best regards,
    Yigit

    #475254

    Yigit, thanks for the reply. Problem is that “Enfold theme options > Header” isn’t available with side menu. “These options are only available if you select a layout that has a main menu positioned at the top. You currently have your main menu placed in a sidebar”
    How can I solve this?

    Thanks,

    Sytse

    #475517

    Hi!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #475813

    Thanks Rikard for looking at this.
    You can find the requested info incl. login in the private content.
    Sytse

    #476236

    Hi!

    You can try this in the Quick CSS field:

    @media only screen and (max-width: 1024px) {
    	.responsive #top #wrap_all #header {
    		position: relative;
    		width: 100%;
    		float: none;
    		height: auto;
    		margin: 0 !important;
    		opacity: 1;
    	}
    	
    	.responsive #top #main {
    		padding-top: 0 !important;
    		margin: 0;
    	}
    	
    	.responsive #top .logo {
    		position: static;
    		display: table;
    		height: 80px !important;
    		float: none;
    		padding: 0;
    		border: none;
    		width: 80%;
    	}
    	
    	.responsive .logo img {
    		height: auto !important;
    		width: auto;
    		max-width: 100%;
    		display: block;
    		max-height: 80px;
    	}
    	
    	.responsive #top #wrap_all .container {
    		width: 85%;
    		max-width: 85%;
    		margin: 0 auto;
    		padding-left: 0;
    		padding-right: 0;
    		float: none;
    	}
    	
    	#advanced_menu_toggle, #advanced_menu_hide {
    		display: block;
    	}
    	
    	.html_header_sidebar .main_menu {
    		display: none;
    	}
    	
    	#mobile-advanced {
    		display: block;
    	}
    	
    	.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area {
    		display: none;
    	}
    	
    	.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    		margin: 0;
    		margin-bottom: 20px;
    		width: 100%;
    	}
    }

    It will switch to the top header earlier than usual.

    Best regards,
    Ismael

    #476376

    Ismael and team, thanks. That solved it.

    Sytse

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Setting when to switch to responsive view’ is closed to new replies.