Navigation drop menu not cickable, disconnected

Support Area Forums Kerygma Navigation drop menu not cickable, disconnected

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://www.crosbies.org/OBC/
  • Author
    Posts
  • #20222
    Melissa Crosby
    Participant

    I have the menu but the drop menu is crazy, its there but unclickable….

    #20223
    Bill Robbins
    Moderator

    Melissa,

    Sorry for the trouble there. Here’s how to move your menu back into place so that it can be clicked:

    1. Go to the Theme Options page and select the Advanced tab.
    2. Scroll down to the Custom CSS box and paste this:
      
      nav#top-menu ul li:hover ul {
      	margin-top: -60px;
      }
      
    3. Update your settings.

    If you have any trouble, let me know.

    Thank you for your business,
    Bill

    #20226
    Melissa Crosby
    Participant

    thanks, was it something I did?

    #20229
    Bill Robbins
    Moderator

    You 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,
    Bill

    #20236
    Melissa Crosby
    Participant

    Still 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

    http://www.crosbies.org/OBC/

    #20238
    Bill Robbins
    Moderator

    Melissa,

    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:

    1. Go to the Appearance section in your WordPress control panel and select Edit.
    2. From the list of files on your right, choose style.css
    3. 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).

    4. 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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Navigation drop menu not cickable, disconnected’ is closed to new replies.