Community Forums › Forums › Archived Forums › General Discussion › Collapsible Menu in Genesis
Tagged: collapsible menu, minimum pro theme
- This topic has 5 replies, 4 voices, and was last updated 11 years, 3 months ago by
Amber.
-
AuthorPosts
-
October 7, 2013 at 1:19 am #65613
Amber
MemberI 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?October 7, 2013 at 7:45 am #65654AnitaC
KeymasterThe 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;
}
Need help with customization or troubleshooting? Reach out to me.
October 7, 2013 at 11:05 am #65681Amit_Gaara
Memberwhat do you mean by collapsible menu ? and where in the minimum pro theme have you seen it ? how to use it ?
October 7, 2013 at 11:28 am #65687jhguynn
MemberAmit 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.
October 7, 2013 at 12:04 pm #65689AnitaC
KeymasterIf 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.
Need help with customization or troubleshooting? Reach out to me.
November 6, 2013 at 12:26 pm #71286Amber
MemberThank 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!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.