Jump to content
Sign in to follow this  
alisamski

Bouncing nav menu

Recommended Posts

mackenzie
Do you mean the drop down menu appearing for some menu items? I'm not sure I see the menu "bouncing" from my view and want to make sure I'm looking at the correct item.

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
alisamski
Yes the "bounce" affect on the dropdown

Share this post


Link to post
Share on other sites
Rob
That's just a drop, without bounce. This is an example of bounce: http://www.cssplay.co.uk/menus/cssplay-image-bounce-dropdown.html The drop down should appear on hover when anyone's cursor goes over a menu item that has submenu items. May we have a link to your site?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
alisamski
Yes... perhaps I'm not calling it correctly, sorry... I like the drop..on the sample.. however it does bounce into place when opening and closing. I love that look and want to replace my menus with that... and not able to locate how.. I also hve some size changes and color changes I will post also here... since I'm having such a hard time zeroing in on the css even in firebug...

Share this post


Link to post
Share on other sites
alisamski
Well the link above actually slides down and slides up... and the Framework menu appears and disappears... so I do like the sliding down affect.. Also I want to have the dropdown menu text smaller and a different color... have tried several things... added !important and cannot get it to change out. Shadow now is smaller than the dropdown width. I appreciate any help. [url="http://strategicexecutiveadvisors.com/wordpress/what-we-do/"]Link[/url]

Share this post


Link to post
Share on other sites
catrina
To change the size and color of the dropdown menu text, please add the following to Custom Code > Custom CSS: [code]nav#nav_row div.main_nav li.menu-item a {font-size: 11px; color: #XXXXXX;}[/code] You may change 11px to any value you want.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alisamski
[code]/* Adjust font size of Menu text */ .main_nav ul li {margin-right:15px;} #nav ul ul li {border-bottom: 1px solid #EEEEEE; } ul.sf-menu ul li {width: 220px; font-size:11px !important; color: #028790 !important; } nav#nav_row div.main_nav li.menu-item a {font-size: 11px; color: #000000!important;} [/code] this what I have tried.. and currently in the custom css... I believe I could be conflicting.. but the code you have did not work.

Share this post


Link to post
Share on other sites
catrina
In the following code, add a space between #000000 and !important: [code]{font-size: 11px; color: #000000!important;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alisamski
same.. no changes... Here is my entire nav custom css.... perhaps I have an overlap somewhere... sorry its a bit of a mess I think... [code]/* Adjust font size of Menu text */ .main_nav ul li {margin-right:15px;} #nav ul ul li {border-bottom: 1px solid #EEEEEE; } ul.sf-menu ul li {width: 220px; font-size:11px !important; color: #028790 !important; } ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {width:220px !important;} nav#nav_row div.main_nav li.menu-item a {font-size: 9px; color: #E01B6A !important;} /*Menu Centering*/ .navigation_wrap .main_nav { margin-left: 72px; margin-right: 0; } /* NAV BACKGROUND AND BORDER UNDER NAV */ .navigation_wrap { border-bottom: 0px solid #DDDDDD !important; background-color: #FFFFFF !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */ .main-nav li a { background-color: #FFFFFF !important; color: #8F8D8E !important; font-size: 13px } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */ .main-nav li a:hover { background-color: #FFFFFF !important; color: #42759E !important; } /* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */ .main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover { background-color: #FFFFFF !important; color: #42759E !important; } .main-nav .current-menu-item ul li a { background-color: #FFFFFF !important; color: #42759E !important; } [/code]

Share this post


Link to post
Share on other sites
catrina
[code].main-nav li a { background-color: #FFFFFF !important; color: #8F8D8E !important; font-size: 13px }[/code] ^ This looks to be an overlap.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alisamski
Taking that out... makes the entire menu smaller... I wanted just the drop down text to be smaller than the main nav.

Share this post


Link to post
Share on other sites
catrina
In that code you just removed, there needs to be a semicolon after the font size value. Please re-add it and add that semi-colon.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alisamski
Re-added it in... added the semicolon... back to square 1... main nav is 13pt... dropdown (I have marked 9pt) so I can see the difference... still no change.. Funny... after 7 sites using this theme... I'm still stumped over this nav menu...

Share this post


Link to post
Share on other sites
alisamski
If I can ID the dropdown css... I can make my alterations size/color...

Share this post


Link to post
Share on other sites
Jenny
This went from a "bounce effect" to css code. What do you need exactly?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
alisamski
Thought it was going to be an added CSS feature to the existing nav... which is why this post is blended.. Here is another example of the slide/bounce with more drama.. [url="Link"]http://bit.ly/yMhskd[/url]

Share this post


Link to post
Share on other sites
alisamski
[url="http://bit.ly/yMhskd"]Link[/url]

Share this post


Link to post
Share on other sites
catrina
The menus being generated in that website showcase different behavior so I think another kind of dropdown menu needs to be used. I think there are jQuery menus with this behavior, but you'll need to implement customizations (most likely using a jQuery plugin). If you're unable to do this, you can get in touch with the help desk at [email protected] and they can get you in touch with someone you can hire to do this customization for you.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×