Third-level menu item

4 Posts

a_frayn Reply #1, 9 years, 2 months ago

Hey all, I'm new to the MODX forum. We've been using MODX at my work for quite some time. We've been rejigging the top navigation bar and all has gone smoothly. It's been a bit frustrating because the locations of the dropdowns is determined by CSS, so I have to try determining it pixel by pixel to get the right space. All is good.

Now for one of the items we want to add a third-level section.

Support -> Tributes & Dedications -> 4 Pages

Got all the pages setup in MODX. I tweaked the page template to have a third level...

<div id="navigation-menu-top">
             [[Wayfinder? &startId=`2` &outerTpl=`accordionContainerTop` &rowTpl=`accordionRowsTop` &innerTpl=`accordionInnerContainerTop` &level=`3` &innerClass=`subnav` &levelClass=`level` &parentRowTpl=`accordionParentsTop` &parentClass=`navparents` &rowIdPrefix=`navTop` &excludeDocs=`191` ]]     
        </div>

Woot!

However, it doesn't render. The CSS looks like this... I've made changes, but reverted it back, as none of them seemed to make a difference.

#navigation-menu-top #navTop11 {
	padding-left: 1px;
	width: 100px;
}
#navigation-menu-top #navTop11 ul.subnav {
	left: 758px;
	width: 130px;
}

Any help would be greatly appreciated.

953 Posts

iusemodx Reply #2, 9 years, 2 months ago

To get an appropriate answer I suggest posting more information e.g. what is #navTop11

Looking at the CSS (without anything else) I would say your navi is only 100px wide for everything.

So as you can see - the info is not enough can you either post a link to the site or post the rendered HTML and provide the full CSS for the navigation block ?

If you don't provide more relevant info, the answers will all be guesstimation and possibly of no help whatsoever

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

4 Posts

a_frayn Reply #3, 9 years, 2 months ago

Hey iusemodx, thanks for the reply.

I can provide lots of detail. The site is leobaeck.ca

The stylesheet is at https://leobaeck.ca/css/style-oct2014.css

#navTop11 is the top navigation CSS code for [[~11]] in MODX. It's the "Support LB" page/link found at the top of the site.

Before I changed the level from 2 to 3, it would only show in the source the menus up to the second level. Now it shows the third level menu items.

<li  id="navTop398"  class="level1">
  <a href="user-menu/support-lb.html" title="Support LB" >Support LB</a>
    <ul  class="subnav">
  <li  id="navTop399"  class="first level2">
  <a href="user-menu/support-lb.html" title="Giving To Leo Baeck" >Giving To Leo Baeck</a>
    
</li>
<li  id="navTop397"  class="level2">
  <a href="user-menu/support-lb/annual-campaign.html" title="Annual Campaign" >Annual Campaign</a>
    
</li>
<li  id="navTop77"  class="last level2">
  <a href="user-menu/support-lb/tribute-cards.html" title="Tributes  & Dedications" >Tributes  & Dedications</a>
    <ul  class="subnav">
  <li  id="navTop402"  class="first level3">
  <a href="user-menu/support-lb/tribute-cards.html" title="Tribute Cards" >Tribute Cards</a>
    
</li>
<li  id="navTop80"  class="level3">
  <a href="user-menu/support-lb/tribute-cards/rosh-chodesh.html" title="Rosh Chodesh" >Rosh Chodesh</a>
    
</li>
<li  id="navTop78"  class="level3">
  <a href="user-menu/support-lb/tribute-cards/leo-baeck-siddur.html" title="Leo Baeck Siddur" >Leo Baeck Siddur</a>
    
</li>
<li  id="navTop403"  class="last level3">
  <a href="http://www.leobaeck.ca/pdf/2014_15_pdf/Mezuzah%20Dedications%20Jan%202015.pdf" title="Mezuzah Dedications" >Mezuzah Dedications</a>
    
</li>

</ul>
</li>

However, it doesn't render the level3 items.

I tried adding a CSS entry for nav77, and it didn't render anything.

Also, I should state, that I was wrong, and [[~11]] is not Support LB, but rather staff, and Support LB is [[~398]].

The appropriate CSS is as follows:

#navigation-menu-top #navTop398 {
	padding-left: 1px;
	background-image: url(/images/separator.gif);
	background-repeat: no-repeat;
	background-position: right;
	width: 160px;
}
#navigation-menu-top #navTop398 ul.subnav {
	left: 580px;
	width: 180px;
}

Once again, thank you for the reply!

953 Posts

iusemodx Reply #4, 9 years, 2 months ago

I don't have much time this morning as I am on my way out.

Just took a quick look at the site and see that you are also using JavaScript to control the nav.

You may have to modify the ".js" to accomodate your changes, you can find the file on your site in: "assets/js/menu.js"

I created a 3 tier pure CSS dropdown ages ago for someone else in the forum, you can download it from this post, it may help you solve your problem.

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation