Navigation drop menu not cickable, disconnected
Support Area › Forums › Kerygma › Navigation drop menu not cickable, disconnected
Tagged: drop menu
- This topic has 5 replies, 2 voices, and was last updated 9 years, 9 months ago by Bill Robbins.
-
AuthorPosts
-
June 19, 2014 at 10:41 #20222Melissa CrosbyParticipant
I have the menu but the drop menu is crazy, its there but unclickable….
June 19, 2014 at 10:43 #20223Bill RobbinsModeratorMelissa,
Sorry for the trouble there. Here’s how to move your menu back into place so that it can be clicked:
- Go to the Theme Options page and select the Advanced tab.
- Scroll down to the Custom CSS box and paste this:
nav#top-menu ul li:hover ul { margin-top: -60px; }
- Update your settings.
If you have any trouble, let me know.
Thank you for your business,
BillJune 19, 2014 at 11:27 #20226Melissa CrosbyParticipantthanks, was it something I did?
June 19, 2014 at 11:35 #20229Bill RobbinsModeratorYou did everything correctly. Sometimes when the logo or navigation menu items are a different size, it can push the sub-menu items down too far like that. In the next theme update, I’ll add in an option to adjust the distance to make it easier to get everything in place.
If you need help with anything else, just let me know.
Thanks,
BillJune 19, 2014 at 13:39 #20236Melissa CrosbyParticipantStill having a nav problem with the drop menu, it drops the wrong stuff
Under Women’s – it should then drop to “MOPs” and “Bible study”, but somehow some the 3rd tier drop and its jumbled
June 19, 2014 at 14:42 #20238Bill RobbinsModeratorMelissa,
Good question. The intention is not to have more than one level of drop-down menu. Since the navigation menu sits close to the right hand side of the site, it’s difficult to have second level drop-downs there since they can extend beyond the screen rather easily.
But if you want to add them in you can with a bit of editing. Here’s what to do:
- Go to the Appearance section in your WordPress control panel and select Edit.
- From the list of files on your right, choose style.css
- Find this section:
/* Header ----------------------------------------------- */ #header { position: absolute; z-index: 200; top: 0; left: 0; right: 0; } .admin-bar #header { top: 28px; } #header-content { display: table; width: 960px; margin-right: auto; margin-left: auto; } #logo, #text-logo { /* Allows header elements to be centered vertically */ display: table-cell; vertical-align: middle; } #logo p, #logo h1, #text-logo p, #text-logo h1 { padding: 0; line-height: 1; margin: 10px 20px 10px 0; } nav#top-menu { display: table-cell; vertical-align: middle; } nav#top-menu ul { width: 100%; margin: 0; text-align: right; list-style-type: none; border: none; } nav#top-menu li { display: inline-block; text-transform: uppercase; } nav#top-menu li a, nav#top-menu li a:visited { color: #24221F; padding: 10px 0 15px; font-weight: 600; margin-left: 15px; border: none; } nav#top-menu li.current-menu-item a, nav#top-menu li a:hover, nav#top-menu ul ul li a:hover, nav#top-menu ul li ul li.current-menu-item a, nav#top-menu ul li.current-menu-item a:hover { color: #617C88; border: none; } nav#top-menu ul ul { display: none; } nav#top-menu ul li:hover ul { display: block; position: absolute; width: 200px; text-align: left; top: 100%; margin: -32px 0 0 -14px; padding: 10px; z-index: 2000; background-color: #181919; } nav#top-menu ul ul li { display: block; float: none; position: relative; width: 100%; margin: 10px; } nav#top-menu ul ul li a, nav#top-menu ul ul li a:visited, nav#top-menu ul ul ul li a, nav#top-menu ul ul ul li a:visited, nav#top-menu ul li.current-menu-item ul li a, nav#top-menu ul li.current-menu-item ul li a:visited { color: #fff; padding: 5px 0; } nav#top-menu ul ul ul { position: absolute; left: 105%; }
and replace it with this:
(be sure to copy the code directly from the support site and not the notification email). - Save your changes.
I did have someone else ask me about this on Tuesday so I may include it in the next update to the theme.
Just do be aware that you can probably only add the second level drop-downs to the items on the left hand side of your navigation menu.
If you have any trouble, let me know.
Thanks,
Bill -
AuthorPosts
- The topic ‘Navigation drop menu not cickable, disconnected’ is closed to new replies.