Ambiance Pro and a new responsive menu

Community Forums Forums Design Tips and Tricks Ambiance Pro and a new responsive menu

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Dag-Erling 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #106152



    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):

    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.


    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.

    • This reply was modified 1 year, 6 months ago by  Dag-Erling.
    • This reply was modified 1 year, 6 months ago by  Dag-Erling.


    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.
    Updates via | Twitter | Google+ | Tumblr



    Hello Tom

    Those tips did wonders! Thank you.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.