I’m very new to all this so apologies for yet another newbie wayfinder query.
I’ve been going round in circles trying to get it to work. I’ve tried various examples. I copy the chunks, I copy the css, copy the call then voila! - nothing happens. I’ve gone right back to basics now. All I’ve done this time is take the sample site, create a new template based on the site I’m creating, add the relevant files to my header and put in the same wayfinder call.
I get a proper menu, which looks as it should (for once), but the dropdown doesn’t work and I get no links to child pages. I did it this way to try and eliminate any issues with javascript in the wrong place or css that’s missing. I’ve left the template files exactly where they are. The same files produce a working menu on pages with the sample site template. All I can think of now is there is something in either my header or my own css which is stopping it from working.
My header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<base href="[(site_url)]"></base>
<title> [[++site_name]] | [[*pagetitle]]</title>
<link rel="stylesheet" type="text/css" href="assets/templates/base/style.css" />
<link rel="stylesheet" href="assets/components/modxss/css/layout.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/components/modxss/css/modxmenu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/components/modxss/css/form.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/components/modxss/css/modx.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/components/modxss/css/print.css" type="text/css" media="print" />
<script src="assets/components/modxss/js/mootools.js" type="text/javascript"></script>
<script src="assets/components/modxss/js/drop_down_menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner"></div><!-- End of banner -->
<div id="leftbar"></div><!-- End of leftbar -->
<div id="rightbar"></div><!-- End of rightbar -->
<div id="footer"></div><!-- End of footer -->
<div id="content">
[[*content]]
</div><!-- End of content -->
<div id="ajaxmenu">
[[Wayfinder?
&startId=`0`
&outerTpl=`mh.outer`
&innerTpl=`mh.inner`
&rowTpl=`mh.row`
&innerRowTpl=`mh.innerRow`
&firstClass=`first`
&hereClass=``
]]
<!-- End of topnavigation -->
</div><!--end of container-->
</body>
</html>
My css
#container {position: relative; margin-left: auto; margin-right: auto; width: 1200px; background-color: #c9cbc8; font-family: "arial";}
/* Position and style for website banner*/
#banner {width: 1200px; height: 100px; position: absolute; left : 0px; top : 0px; background-image:url(’sitebanner.jpg’);}
/*main content*/
#content {position: absolute; left : 200px; top: 120px; width: 800px; background-color: white;
}
/*left sidebar*/
#leftbar {position: absolute; left : 0px; top: 120px; width: 200px; height: 800px; background-color: red;
}
/*right sidebar*/
#rightbar {position: absolute; right : 0px; top: 120px; width: 200px; height: 800px; background-color: black;
}
/* Bottom of page*/
#footer {
}
The result is at
http://www.forde.uk.com/modx3/index.php?id=1
If anybody can help I would be very grateful.
☆ A M B ☆
