Make Menu Switch to collapsed from 921px instead of 768px?

Hi, I would like the menu of the site to collapse into the mobile version when the screen size gets to below 921px. currently at 920px to 768px the menu appears on 2 levels. therfore i would like it to switch between full main menu as is now on full page desktop browsers to the mobile version at that 921px point.

Following recent discussion with @Michael Bissett in live chat (hopefully he can continue as he's up-to-date on the changes)

Here is the sudgested CSS code from the live session

@media only screen and (min-width: 768px) {

.main-navigation ul {
float: none;
display: inline-block;
}

}

*URL REMOVED*
Thanks

Tom

  • Michael Bissett

    Hey @Tom! :slight_smile:

    On looking at this further, I better understand what you're asking for here. I will say though that doing this isn't so simple, as there's quite a bit of code that'll need to be adjusted.

    You'll need to adjust the custom CSS code for the parts that presently are only applied when the screen width is 768px or under (which will require some trial and error, there's a lot that's been inserted here), but here's the code that should get you the rest of the way here:

    @media only screen and (max-width: 921px) {
    	.grid {
    		width: 100%;
    		min-width: 0;
    		margin-left: 0px;
    		margin-right: 0px;
    		padding-left: 20px; /* grid-space to left */
    		padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
    	} 
    
    	.socials { margin-bottom: 0 !important; text-align: center; } 
    
    	[class*='col-'] {
    		width: auto;
    		float: none;
    		margin-left: 0px;
    		margin-right: 0px;
    		margin-top: 10px;
    		margin-bottom: 10px;
    		padding-left: 0px;
    		padding-right: 10px; /* column-space */
    	}
    
    	.menu-toggle,
    	.main-navigation.toggled .nav-menu {
    		display: block;
    		float: right;
    		height: 70px;
    	}
    	.menu-toggle:hover {
    		-webkit-transform: scale(1);
    		-moz-transform: scale(1);
    		-o-transform: scale(1);
    		-ms-transform: scale(1);
    		transform: scale(1);
    	}
    	.main-navigation ul {
    		display: none;
    	}
    
    	/* Mobile Layout */
    
    	[class*='mobile-col-'] {
    		float: left;
    		margin-left: 0px;
    		margin-right: 0px;
    		margin-top: 0px;
    		margin-bottom: 10px;
    		padding-left: 0px;
    		padding-right: 10px; /* column-space */
    		padding-bottom: 0px;
    	}
    
    	.home-class-grid {
    		padding-left: 0px !important;
    		padding-right: 0px !important;
    	}
    	.home-blog-info {
    		padding: 10px 0 !important;
    	}
    	.home-blog-photo img {
    		width: 100%;
    		margin-bottom: 5px;
    	}
    	.home-blog {
    		padding-right: 20px !important;
    	}
    	.page-wrapper {
    		padding: 20px !important;
    	}
    	.widget-area {
    		border-radius: 8px;
    	}
    	.main-navigation li {
    		width: 200px;
    		background: #1e1c1d;
    	}
    	.main-navigation a {
    		padding: 12px 20px;
    	}
    
    }

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.