[beth_almeida]

Hi,

This theme is great — but as my menu grows I was wondering if there’s any way to customize when the horizontal menu nav switches to the toggle/pull down menu, so that I could make that happen sooner (or at a larger width). Please let me know, currently my nav is overlapping my page titles!

Thanks!

[Theme Horse Support Team]

Hi beth_almeida,

This is responsive design. If you view in smaller device then menu nav switches to the toggle menu. About your overlapping page titles could you provide your site Url too.

Thank you!

[beth_almeida]

It is responsive on smaller devices such as mobile, but still keeps the full menu on my ipad in both landscape and portrait whereas I’d love to have the toggle at this size. I was also hoping to make the toggle appear quicker when resizing the browser. This is one of the pages I’m working on:

http://dev-explore1.pantheon.io/letter-from-the-president/

Right now I pushed the nav links under the page title when the browser gets to a certain px width (since some page titles are longer than others and that’s when the title and nav links overlap), but I’d prefer to switch it to the toggle! I have been messing with the css a lot so that might cause some issues.

Thanks for your help!

[Theme Horse Support Team]

Hi beth_almeida,

First of all create a child theme and paste the below code in your style.css
Add this below code in your style.css file

/*
Theme Name: Ambition Child Theme
Author: Self-Help WordPress User
Template: ambition
*/

@import url("../ambition/style.css"); 

@media only screen and (max-width: 1023px) {
.hgroup-right {
	padding-right: 0;
	min-width: inherit;
}
.search-toggle {
	display: none;
}

/* Responsive Navigation */
.menu-toggle {
	display: block;
	background-color: rgba(0, 0, 0, 0);
	font-size: 0;
	border: 0 none;
	padding: 0;
	color: #666;
	width: 30px;
	height: 21px;
	float: right;
	margin-top: 19px;
	cursor: pointer;
}
.menu-toggle:before {
	display: block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 25px;
	line-height: 0;
	font-family: 'Genericons';
	vertical-align: top;
	content: '\f419';
}
.hgroup-right {
	clear: both;
	float: none;
}
.nav-menu {
	display: none;
}
.toggled-on .nav-menu {
	display: block;
}
.main-navigation {
	float: none;
}
.main-navigation li {
	position: inherit;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-left: 0;
}
.main-navigation a {
	float: none;
	padding: 10px 0;
	height: inherit;
}
/* Dropdown */
.main-navigation ul li ul,
.main-navigation ul li:hover ul ul,
.main-navigation ul ul li:hover ul ul,
.main-navigation ul ul ul li:hover ul ul,
.main-navigation ul ul ul ul li:hover ul ul {
	display: block;
}
.main-navigation ul li ul {
	position: inherit;
	top: 0;
	width: inherit;
}
.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
	padding: 10px 0 10px 15px;
}
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
	background-color: inherit;
}
.main-navigation ul li ul li ul {
	left: 0;
}
.main-navigation ul li ul li ul li a,
.main-navigation ul li.current-menu-item ul li ul li a,
.main-navigation ul li ul li.current-menu-item ul li a,
.main-navigation ul li.current_page_ancestor ul li ul li a,
.main-navigation ul li.current-menu-ancestor ul li ul li a,
.main-navigation ul li.current_page_item ul li ul li a {
	padding-left: 21px;
}
}

Thank you!

[Author]

Posts