We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 6696
    • 145 Posts
    Hi . . .

    I installed Modx for a client and with the navigation the flyouts are starting in the ’center’ of the main button and not at the bottom as it should. Is there a fix for that?

    Check it out here.
    http://vps2836.inmotionhosting.com/~belknap/index.php?id=1

    thanks,
    Daniel
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      It’s all in the CSS. Adjust the CSS so they are positioned as you wish.

      Most likely the submenu is positioned absolutely within its parent <li> container; change the top position of the submenu to lower it to the bottom of its container.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 6696
        • 145 Posts
        Do you see anything odd here that might cause the problem?

        #ajaxmenu ul {
        	margin: 0;
        	padding: 0;
        	list-style: none;
        	}
        
        #ajaxmenu ul li {
        	position: relative;
        	float: left;
        	width:129px;
        	display: block;
        	text-decoration: none;
        	text-align: center;
        	font-weight: normal;
        }
        	
        #ajaxmenu ul li ul {
        	position: absolute;
        	left: 0; /* Set 1px less than menu width */
        	top:16px;
        	line-height: 24px;
        
        	}
        #ajaxmenu ul li a {
        	color: #ffffff;
        	font-weight: bold;
        }
        
        
        
        /* Styles for Menu Items */
        #ajaxmenu ul li.firstcategory {
        
        	color: #062E4B;
        	font-weight: bold;
        	height: 26px;
        	line-height: 28px;
        	padding-right: 0px;
        	padding-left: 0px;
        	background-image: url(images/menu.png);
        	background-repeat: no-repeat;
        	background-position: 0px;
        	margin: 0px;
        
        	}
        #ajaxmenu ul li.category {
        	color: #ffffff;
        	font-weight: bold;
        	height: 28px;
        	line-height: 28px;
        	padding-right: 0px;
        	padding-left: 0px;
        	background-image: url(images/menu.png);
        	background-repeat: no-repeat;
        	background-position: -129px;
        	margin: 0px;
        
        	}
        #ajaxmenu ul li.lastcategory {
        	color: #ffffff;
        	font-weight: bold;
        	height: 28px;
        	line-height: 28px;
        	padding-right: 0px;
        	padding-left: 0px;
        	background-image: url(images/menu.png);
        	background-repeat: no-repeat;
        	background-position: -222px;
        	margin: 0px;
        
        	}
        
        
        #ajaxmenu ul li.firstcategory:hover, #ajaxmenu ul li.firstcategory.over {
        	color: #fff;
        	background-image: url(images/menu_roll.png);
        }
        
        #ajaxmenu ul li.category:hover, #ajaxmenu ul li.category.over {
        	color: #fff;
        	background-image: url(images/menu_roll.png);
        }
        #ajaxmenu ul li.lastcategory:hover, #ajaxmenu ul li.lastcategory.over {
        	color: #fff;
        	background-image: url(images/menu_roll.png);
        }
        
        /* commented backslash \*/ 
        * html ul li a {height:1%}
        /* end hack */ 
        #ajaxmenu li a {
        	text-decoration: none;
        }
        
        /* hovered lists */
        #ajaxmenu li a, #ajaxmenu li.over a {
        	color: #fff;
        	width: 129px;
        	display: block;
        
        }
        #ajaxmenu li li a:hover, #ajaxmenu li.over li a:hover {
        	background-image: url(images/bullet_11x8_roll.gif)  !important;
        	color: #fff;
        	background-repeat: no-repeat;
        	background-color: #FF0000;
        	background-position: left center;
        	text-indent: 8pt;
        }
        
        /* set dropdown */
        #ajaxmenu li li a, #ajaxmenu li.over li a {
        	color: #ffffff;
        	background-image: url(images/bullet_11x8.gif) !important;
        	background-repeat: no-repeat !important;
        	text-align: left;
        	border-right: 1px solid #2f2f2f;
        	border-bottom: 1px solid #2f2f2f;
        	border-left: 1px solid #2f2f2f;
        	font-weight: normal;
        	width: 222px;
        	background-color: #000000;
        	background-position: left center;
        	text-indent: 8pt;
        }
        #ajaxmenu li ul li a {
        	padding-top: 2px;
        	padding-bottom: 2px;
        	padding-right: 5px;
        	padding-left: 5px;
        } /* Sub Menu Styles */
        
        #ajaxmenu li ul, #ajaxmenu li.over ul { 
        	display: block; 
        } /* The pop */
        #ajaxmenu {
        	margin-right: auto;
        	margin-left: auto;
        	width: 919px;
        
        }
        
        #myajaxmenu {
        	position: absolute;
        	top:1px;
        	left: 0px;
        	display: block;
        	z-index: 1000;
        }



        thank you so much,
        Daniel
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          #ajaxmenu ul li ul {
          position: absolute;
          left: 0; /* Set 1px less than menu width */
          top:16px;
          line-height: 24px;
          Try adjusting the top:16px; to shift the submenu down further.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 6696
            • 145 Posts
            That did it smiley

            thank you,
            Daniel