Collapsible Menu in Genesis

[Amber]

I have my website (still on my local server but I probably don't need to show it off for this question) but I'm hoping to figure out this collapsible menu in Genesis. I'm using the Minimum Pro child theme and of course customizing it. It comes with the collapsible menu however there are two things I was hoping to figure out about it.

How do I change the symbol of the icon? Right now it's really hard to see on my background and I'd like to use a icon I made.
Also, if I end up not wanting it, how do I disable the effect and just have the menu?

[Anita]

The icon is shown in your css here where it says "content".

#responsive-menu-icon:before {
color: #333333;
content: "";
font-family: 'Icon';
font-size: 1.6rem;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
margin: 0 auto;
text-transform: none;
}

To remove it all together so you have each individual menu item, scroll down to your media queries and look for -

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

Under that... remove this:

.responsive-menu {
display: none;
}

#responsive-menu-icon {
display: block;
}

---

Love coffee, chocolate and my Bella!

[Amit_Gaara]

what do you mean by collapsible menu ? and where in the minimum pro theme have you seen it ? how to use it ?

[jhguynn]

Amit Gaara: I think by "collapsible" Amber means "drop-down". This is accomplished in WP custom menu when you drag items around under a single menu heading. This is best accomplished by producing a custom link first with navigation target = "#", then once added to the menu you can drag all sub-pages underneath that as a "child". i.e.:

Cakes (custom top level link with target="#")
-- cheesecake
--shortcake
--pound cake
--etc.

When done this way, cakes wouldn't be clickable, but it would have a downward pointing arrow indicatin "more". Once hovered, the sub-pages are revealed.

[Anita]

If you go to the Minimum Pro Demo on your mobile device, you will see the collapsible menu. You can only see this when you minimize or use a mobile device.

---

Love coffee, chocolate and my Bella!

[Amber]

Thank you everyone for your replies! Very sorry for the delay in mine, I forgot completely about this as I had moved on and now I'm back on it.

anitac - You mentioned the way I was talking about. Thank you for that. 🙂 I had taken it out completely but realize it would be a great feature to have as I have so many items in my menu's. However when I have it in there pointing to an icon I've chosen it does not work. Have I set this up properly?

#responsive-menu-icon::before {
	-webkit-font-smoothing: antialiased;
	color: #333;
	content: "url("images/mobilenavbutton.png") no-repeat;";
	font-size: 16px;
	font-size: 1.6rem;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1;
	margin: 0 auto;
	speak: none;
	text-transform: none;
	width: 100px!important;
	height: 100px!important;
} 

This is my website on a testing server of mine. And then of course I placed the CSS back in the media queries.

Thanks!

[Author]

Posts