How to use rollover menus with default wp menus?

[apattee 0]

Hi, I'm trying to create a rollover menu for my main navigation. I'd like it so instead of of having to click on the menu item, the menu appears when hovering over the item. Is this possible? Thanks.

[hockpunk426 0]

If you want to create a button in your navigation that is just a place holder for child navigation go appearance > menu Under custom link you should put the symbol # under url and then the name of the button under label. This will create the button for the drop down navigation ("rollover menus"). Now just add the pages you have created to your menu and place them under the button you just made. Make sure they are pushed off to the side so they are children of the button you have placed them under. Now go to PageLines > Site Options > Header and Footer and make sure you enable drop down navigation. Let me know if that helps.

[apattee 0]

Hmm that didn't work. Any other ideas?

[hockpunk426 0]

What about it didn't work? Did you create the blank button (non-linked)? Did you create pages for that blank button?

[apattee 0]

Yes sorry. In my current nav bar, the "Why LePort" menu item is a custom link with pages below that. The custom link has a # sign in it and I titled it "Why LePort."

[hockpunk426 0]

Do you have custom code for your nav bar?

[apattee 0]

Yes, I am using a background image for the nav bar. [code]/* Code to change nav bar color */ .navbar-content-pad, .navbar { background-image:url('/wp-includes/images/mainnavbackground3.jpg'); } /* Code to change drop down arrow color */ .navbar .caret { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #FFFFFF; content: ""; display: inline-block; height: 0; opacity: 1; vertical-align: top; width: 0; } /* Code to change main nav text color */ .navbar .navline > li > a {color:rgba(255,255,255,1.0); } /* Code to change hover background over main nav */ .navbar .navline > li > a:hover, .navbar li.current-menu-item > a {background-color:rgba(0,0,0,0.2);} .navbar .navline > li > a { padding: 10px 15px; }[/code]

[Danny+ 1,327]

Hi apattee, Unfortunately, the new Navbar section is based off Twitter Bootstrap and their menu systems use click rather that hover to display drop down menus. This is the functionality of the menu, if you wish to have hover, enable the display of drop down menus. Simply replace the NavBar section in your header template with the Nav Classi section.

[apattee 0]

Can you let me know how to do that exactly? What code needs to be inputted? Replaced? And what file? Thanks.

[Jenny 33]

Use the Classic nav instead of the NavBar. It has a hover dropdown effect.

[apattee 0]

Thanks that works. What is the CSS selector for the classic nav so I can add a background image and a few other things? Thanks again.

[batman 389]

You can modify Nav Classic with the "Simple CSS Lite" plugin found in the PageLines Store to change all parameters. It's a free plugin that allows you control over the color of the menu. Simple CSS Lite only works on the standard navigation, it don??t work on NavBar. ;) To add a background image you must use a CSS rules.

[catrina 103]

Thanks, batman. (I think I just enjoy saying thank you to you all the time because of your username)

[batman 389]

Hi Catrina Always it is a pleasure when you say "Thanks, batman" for me. Much better than you imagine. (although it be for my username) :)

[Danny+ 1,327]

Hi apattee, I have accepted Batman's reply, using Simple Lite CSS would be the best course of action for you.