Cant click on menu items

earcandy · Post by **earcandy** » Wed Nov 05, 2014 2:03 am

http://lowcostlawschool.com/

Seems like the menu mostly is unclickable although it also seems hit or miss. This is a purchased template called buddy08 from cmstemplatebuddy. The template exceed the characters I can post here so:

MOST OF TEMPLATE:

Code: Select all

{strip}
{content assign="capturedcontent"}
{/strip}
<!doctype html>
<!--[if lt IE 7 ]><__html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><__html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><__html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><__html lang='{if isset($nls)}{$nls->htmlarea()}{/if}' dir='{if isset($nls)}{$nls->direction()}{/if}'><!--<![endif]-->
<head>
<title>{sitename} - {if isset($newstitle)}{$newstitle}{else}{title}{/if}</title>
{metadata}
{cms_stylesheet}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css' />
{cms_selflink dir='start' rellink=1}
{cms_selflink dir='prev' rellink=1}
{cms_selflink dir='next' rellink=1}

<!-- JAVASCRIPT CALLS -->
<__script__ src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></__script>
<__script__ src="/uploads/tpl-buddy-008/jquery.nivo.slider.pack.js" type="text/javascript"></__script>
<__script__ src="/uploads/tpl-buddy-008/jquery.cycle2.min.js" type="text/javascript"></__script> 
<__script__ src="/uploads/tpl-buddy-008/init.js" type="text/javascript"></__script>
<!-- END JS CALLS -->
{literal}
<!--[if IE 7]>
<style type="text/css">
.threeBlocksWrapper {width:980px;}
.nivo-caption-bg {background:none;}
.formbuddyfooter .submit input {padding:5px 0px 5px 14px;}
</style>
<![endif]-->
{/literal}

{literal}
<!--[if lte IE 8]>
<style type="text/css">
#search input {padding: 8px 0 0;height:26px;}
</style>
<![endif]-->
{/literal}

{literal}
<!--[if lte IE 9]>
<style type="text/css">
.formbuddyfooter .submit input, .formbuddyfooter .submit input:hover {background-position: 8px 4px;}
</style>
<![endif]-->
{/literal}

</head>
</__body>
    <div id="top"></div>

    <!-- TEMPLATE BLOCKS --> 
    {content block='display_header_slider' label="Display Header Slider" oneline="true" size="1" default="-" assign="display_slider" tab='Header' wysiwyg='false'}{if empty($display_slider)}{assign var="display_slider" value="-"}{/if} 
    {capture assign="galleryfolder"}{content block="galleryfolder" oneline="true" label="Gallery Module foldername for Header Slideshow" tab='Header' wysiwyg='false'}{/capture}
    {capture assign='pagetitle'}{content block='main_page_title' label='Main Page Title' description='H2 Title on a page frontend' wysiwyg="false" oneline="true" tab='Main' default='Main Page Title'}{/capture}
    {content block='display_breadcrumbs' label="Display Breadcrumbs" oneline="true" size="1" default="+" assign="display_breadcrumbs" tab='Main' wysiwyg='false'}{if empty($display_breadcrumbs)}{assign var="display_breadcrumbs" value="+"}{/if}
    {content block='display_search' label="Display Search" oneline="true" size="1" default="+" assign="display_search" tab='Main' wysiwyg='false'}{if empty($display_search)}{assign var="display_search" value="+"}{/if}
    {content block='display_sidebar' label="Display Sidebar" oneline="true" size="1" default="+" assign="display_sidebar" tab='Sidebar' wysiwyg='false'}{if empty($display_sidebar)}{assign var="display_sidebar" value="+"}{/if} 
    {content block='display_news' label="Display News" oneline="true" size="1" default="+" assign="display_news" tab='Sidebar' wysiwyg='false'}{if empty($display_news)}{assign var="display_news" value="+"}{/if} 
    {content block='news_slider' label="Sliding News ON/OFF" oneline="true" size="1" default="+" assign="display_news_slider" tab='Sidebar' wysiwyg='false'}{if empty($display_news_slider)}{assign var="display_news_slider" value="+"}{/if} 
    {content block='sidebar_title' label='Sidebar Title' assign='sidebartitle' wysiwyg="false" oneline="true" default='Sidebar Title' tab='Sidebar'}
    {content block='threeblocks' label="Display Three Blocks" oneline="true" size="1" default="+" assign="display_threeblocks" tab='Three Blocks Content' wysiwyg='false'}{if empty($display_threeblocks)}{assign var="display_threeblocks" value="+"}{/if}
    {content block='specialbox' label="Display Special Box" oneline="true" size="1" default="+" assign="display_specialbox" tab='Special Box' wysiwyg='false'}{if empty($display_specialbox)}{assign var="display_specialbox" value="+"}{/if}

    <!-- END TEMPLATE BLOCKS -->
    
    <!-- ACCESSIBILITY SKIP LINKS -->
    <ul class="accessibility">
      <li>{anchor anchor='mainNav' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
   <!-- END ACCESSIBILITY SKIP LINKS -->
    <hr class="accessibility" />    
  
    <div id="pageWrapper">

    <!-- HEADER -->
    <div id="header">     
  
       <div id="logo">
          <h1><a href="{root_url}" title="{sitename}"><img alt="{sitename}" src="/uploads/tpl-buddy-008/logo.png" /></a></h1>
          <hr class="accessibility" />
        </div>
    <!-- TOP NAVIGATION -->
        <div id="mainNav"> 
          <h2 class="accessibility">Navigation</h2>
          {menu loadprops=0 number_of_levels='3'}
          <hr class="accessibility" />
        </div>
    <!-- END TOP NAVIGATION --> 

    </div>
    <!-- END HEADER -->

    {if $display_slider == "+"}    
    <!-- SLIDER -->
    <div id="sliderWrapper">
        {if !empty($galleryfolder)}
        <div class="sliderContainer">
	  {Gallery template="buddySlider" dir=$galleryfolder} 
        </div>
        {else}
          <h4 class="error_message">Please enter Gallery folder name or hide Header Slider!</h4> 
        {/if}
     </div>
    <!-- END SLIDER -->
    {/if}

    <!-- CONTENT -->
        <div id="content">
     
       {if $display_breadcrumbs == "+" || $display_search == "+"}
          <!-- BREADCRUMBS -->
          {if $display_slider != "+"}  
          <div class="breadcrumbs">
          {else}
          <div class="breadcrumbs border">
          {/if} 
             {if $display_search == "+"}
	        <!-- SEARCH -->                       
               <div class="search">
                 {search search_method="post"} 
               </div>
             <!-- END SEARCH -->
             {/if}
             {if $display_breadcrumbs == "+"}
               {if isset($newstitle)}
                 {breadcrumbs starttext='You are here' root='Home' delimiter='&raquo;'} » {$newstitle}
               {else}
                 {breadcrumbs starttext='You are here' root='Home' delimiter='&raquo;'}
               {/if}
               <hr class="accessibility" />
               {/if}
          </div>
          <!-- END BREADCRUMBS -->
        {/if}

          <!-- MAIN CONTENT -->
          {if $display_sidebar == "+"}
            <div id="main" class="twoColumns float-left">
          {else}
            <div id="main" class="oneColumn float-left">
          {/if}
              {if isset($newstitle)}
                <h2>{$newstitle}</h2>
              {else}
                <h2>{$pagetitle}</h2>
              {/if}
              {$capturedcontent}
            </div>
          <!-- END MAIN CONTENT -->

          {if $display_sidebar == "+"}       
          <!-- SIDEBAR -->
          <div id="sidebar" class="float-right">

            {if $display_news == "+"}              
            <!-- NEWS -->  
            <div id="news">
              {news number='3' moretext="Read more..."} 
            </div>
            <!-- END NEWS -->
            {/if}
          
            <!-- SIDEBAR CONTENT BLOCK -->   
            {if $sidebartitle}
              <h3>{$sidebartitle}</h3>
            {/if}       
            {content block='sidebar' label='Sidebar content block (to hide this block just leave it empty)' default='Sidebar Content here' assign='sidecontent' tab='Sidebar'}
            {if !empty($sidecontent)}
            <div class="sidecontent">
              {$sidecontent}
            </div>
            {/if} 
            <!-- END SIDEBAR CONTENT BLOCK -->
        </div>
        <!-- END SIDEBAR -->
        {/if}

        {if $display_threeblocks == "+"} 
        <!-- THREE BLOCKS -->
        {content block='first_block_title' label='First Block Title' assign='firstblocktitle' wysiwyg="false" oneline="true" default='First Block Title' tab='Three Blocks Content'}
        {content_module block="first_block_image" label="First Block Image (410px width)" module="GBFilePicker" tab='Three Blocks Content' assign=firstblockimage mode="browser"}
        {content block='first_block_content' label='First Block Content' assign='firstblockcontent' default='Content for the First Block' tab='Three Blocks Content'}
        {content block='first_block_link_text' label='More Link (label)' assign='firstblocklinktext' wysiwyg="false" oneline="true" default='More details...' tab='Three Blocks Content'}
        {content block='first_block_link' label='More Link (hyperlink)' assign='firstblocklink' wysiwyg="false" oneline="true" default='#' tab='Three Blocks Content'}
        {content block='second_block_title' label='Second Block Title' assign='secondblocktitle' wysiwyg="false" oneline="true" default='Second Block Title' tab='Three Blocks Content'}
        {content_module block="second_block_image" label="Second Block Image (410px width)" module="GBFilePicker" tab='Three Blocks Content' assign=secondblockimage mode="browser"}
        {content block='second_block_content' label='Second Block Content' assign='secondblockcontent' default='Content for the Second Block' tab='Three Blocks Content'}
        {content block='second_block_link_text' label='More Link (label)' assign='secondblocklinktext' wysiwyg="false" oneline="true" default='More details...' tab='Three Blocks Content'}
        {content block='second_block_link' label='More Link (hyperlink)' assign='secondblocklink' wysiwyg="false" oneline="true" default='#' tab='Three Blocks Content'}
        {content block='third_block_title' label='Third Block Title' assign='thirdblocktitle' wysiwyg="false" oneline="true" default='Third Block Title' tab='Three Blocks Content'}
        {content_module block="third_block_image" label="Third Block Image (410px width)" module="GBFilePicker" tab='Three Blocks Content' assign=thirdblockimage mode="browser"}
        {content block='third_block_content' label='Third Block Content' assign='thirdblockcontent' default='Content for the Third Block' tab='Three Blocks Content'}
        {content block='third_block_link_text' label='More Link (label)' assign='thirdblocklinktext' wysiwyg="false" oneline="true" default='More details...' tab='Three Blocks Content'}
        {content block='third_block_link' label='More Link (hyperlink)' assign='thirdblocklink' wysiwyg="false" oneline="true" default='#' tab='Three Blocks Content'}

        <div class="threeBlocksWrapper float-left">
          <!-- FIRST BLOCK -->
          <div class="threeBlocks float-left">
            {if $firstblockimage}
              <div class="threeBlocksImage"><img src="uploads/{$firstblockimage}" alt="{$firstblockimage}" /></div>
            {/if}
            {if $firstblocktitle}
              <div class="threeBlocksTitle"><h3>{$firstblocktitle}</h3></div>
            {/if}
            {if $firstblockcontent}
              <div class="threeBlocksContent">{$firstblockcontent}</div>
            {/if}
            {if $firstblocklink && $firstblocklinktext}
              <div class="threeBlocksMoreLink"><a href="{$firstblocklink}">{$firstblocklinktext}</a></div>
            {/if}
          </div>
          <!-- SECOND BLOCK -->
          <div class="threeBlocks float-left">
            {if $secondblockimage}
              <div class="threeBlocksImage"><img src="uploads/{$secondblockimage}" alt="{$secondblockimage}" /></div>
            {/if}
            {if $secondblocktitle} 
              <div class="threeBlocksTitle"><h3>{$secondblocktitle}</h3></div>
            {/if}
            {if $secondblockcontent}
              <div class="threeBlocksContent">{$secondblockcontent}</div>
            {/if}
            {if $secondblocklink && $secondblocklinktext}
              <div class="threeBlocksMoreLink"><a href="{$secondblocklink}">{$secondblocklinktext}</a></div>
            {/if}
          </div>
          <!-- THIRD BLOCK -->
          <div class="threeBlocks2 float-left">
            {if $thirdblockimage}
              <div class="threeBlocksImage"><img src="uploads/{$thirdblockimage}" alt="{$thirdblockimage}" /></div>
            {/if}
            {if $thirdblocktitle}
              <div class="threeBlocksTitle"><h3>{$thirdblocktitle}</h3></div>
            {/if}
            {if $thirdblockcontent}
              <div class="threeBlocksContent">{$thirdblockcontent}</div>
            {/if}
            {if $thirdblocklink && $thirdblocklinktext}
              <div class="threeBlocksMoreLink"><a href="{$thirdblocklink}">{$thirdblocklinktext}</a></div>
            {/if}      
          </div>

psy · Post by **psy** » Wed Nov 05, 2014 10:14 am

There is a gap between the top level of the menu and the dropdown items which means that when you pull the cursor down, it leaves the menu.

Make sure that the dropdown sections touch the bottom of the top level parent menus item, eg:

Code: Select all

#mainNav ul ul {
margin-top: 20px;
top: 0;
}

Play around with the top margin in the 2nd level items to line them up with the bottom of the parent menu item using px or ems or whatever works for you.

earcandy · Post by **earcandy** » Wed Nov 05, 2014 3:15 pm

I have been playing with this top:XXem; value in the stylesheet but see no effect on the menu

Code: Select all

/* second level */
#mainNav ul ul {
	position:absolute;
	display:none;
	width:16.2em;
	top:10em;
	left:-1px;
	z-index:9;
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);

Post by **velden** » Wed Nov 05, 2014 4:12 pm

Use a web inspector so your able to directly see what css is applied and what changes are needed.

Internet Explorer (F12), Firefox (shift-F5), Google Chrome, Safari all have a built-in inspector.

Personally I like to use Firefox with Firebug add-on.

earcandy · Post by **earcandy** » Wed Nov 05, 2014 4:32 pm

I changed the default menu template and its now working. Why I will never understand.

CMS Made Simple Forums

Cant click on menu items

Cant click on menu items

Re: Cant click on menu items

Re: Cant click on menu items

Re: Cant click on menu items

Re: Cant click on menu items