Ambiance Pro and a new responsive menu

[Dag-Erling]

Hello

While developing the page for a client I realized that the menu system in Ambiance Pro is not user friendly when you activate the sub-menus. After attempting to fix that I gave up and started on this instead (after tip from a friendly guy here on the forums):

http://wpbacon.com/tutorials/genesis-responsive-menu-2-0/

I got it working but I have some issues with it.

1. The hamburger still shows on the old menu when I open it. I can just set the state on this too open so that is a fix for it. But it feels a bit "hacky". I would much rather just turn it off completely.

2. This the main issue I'm having. When I open the + to get to the sub-menus it moves all of the sub-menus to the left. I suspect that somewhere the "old" menu in Ambiance Pro is bugging me but I can't seem to figure out what part of the CSS that does that.

PS! You gotta scale the screen down until you get the new menu.

http://www.dagerlingjensen.no/montasje

[Dag-Erling]

A little forever alone post here but I found the CSS that was messing point 2 up.

In Ambiance Pro there are these lines

	.genesis-nav-menu .menu-item:hover > .sub-menu {
	left: 50%;
	margin-left: -100px;
	opacity: 0.8;

That is the part that moves the menu when the mouse hover over it. With that fixed the menu stays still.

[Tom]

Hi Dag,

If I understand you correctly, you want to see your menu, no hamburger, until the new mobile menu kicks in at 768px. To do this, edit the theme file effects.js and comment-out or delete lines 3-7 inclusive. This leaves the menu 'shrink' function intact.

If I may offer a suggestion? ... the "close menu arrow" icon that appears is a little underwhelming when presented with the thick Open Sans typeface and the thicker +/- icons for the submenu items. You can display a broader icon by replacing "2191" with "21e7" in the code at line 1719. (This page offers a display of character code icons.)

.menu-toggle.activated:before {
	content: "\2191";
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Dag-Erling]

Hello Tom

Those tips did wonders! Thank you.

[Author]

Posts