Stratford Theme: Mobile Menu Breakpoint

  • Unknown's avatar
    doublya · Member ·

    Hello,
    I’m having great difficulty adjusting the mobile menu breakpoint. I’ve tried every suggested snippet of CSS code to no avail.

    I’m using the WordPress Stratford theme.

    The menu changes to mobile mode at 560px. I need that adjusted to 1100px as my menu collapses poorly on tabets.

    Any help would be very appreciated.

    Thank you

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi, layout changes like this can get pretty complex with various media queries and what not, so they fall outside the scope of the CSS support we offer here.

    If you’re willing to tinker more on your own, something like this might work:

    @media only screen and (max-width:1100px) {
	.main-navigation > div {
		display: none;
	}
	
	.main-navigation #toggle-menu {
		display: block;
	}
	
	.main-navigation > div > ul > li > ul {
		display: none;
	}
	
	#toggle-menu {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.main-navigation>div>ul li {
		display: block;
		position: relative;
		width: 100%;
		z-index: 1;
		padding: .5em;
	}
	
	#masthead .site-header-wrapper .main-navigation ul li {
		margin: 0;
	}
}

    But it would depend on how it fits with your site’s style in the ended.

    Note you’d also be welcome to hire a designer if needed. And, many of these themes are fairly interchangeable as far as page layout goes. So if you like the menu style better in another theme, that could work. I’d recommend checking demos and chatting with support prior to changing themes so we can help you through.

  • The topic ‘Stratford Theme: Mobile Menu Breakpoint’ is closed to new replies.