Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 16, 2015 at 5:21 pm #474468
    sberendss

    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?

    July 16, 2015 at 7:53 pm #474539
    Yigit

    Hey sberendss!

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

    Best regards,
    Yigit

    July 18, 2015 at 11:27 am #475254
    sberendss

    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

    July 20, 2015 at 5:03 am #475517
    Rikard

    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

    July 20, 2015 at 2:19 pm #475813
    sberendss

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

    July 21, 2015 at 1:03 am #476236
    Ismael

    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

    July 21, 2015 at 10:38 am #476376
    sberendss

    Ismael and team, thanks. That solved it.

    Sytse

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