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 4 months, 1 week ago.

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

    Dag-Erling
    Participant
    Post count: 49

    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
    #106210

    Dag-Erling
    Participant
    Post count: 49

    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 4 months, 1 week ago by  Dag-Erling.
    • This reply was modified 4 months, 1 week ago by  Dag-Erling.
    #106238

    Tom
    Participant
    Post count: 892

    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 GenesisThemes.ca | Twitter | Google+ | Tumblr

    #106286

    Dag-Erling
    Participant
    Post count: 49

    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.