[solved] Vertical menu's submenus and styling broken after..

[cnymike]

After big upgrade jump from 1.6.7 to 1.9.4.1, sidebar menu is not operating as it was before upgrade and it has also taken on a different style. Since all pages use the same template, I don't understand how the vertical menu can look and perform different on a different page, then it does on the home page. How is that possible?

I can't really get a handle on what has happened but my vertical menu on the left sidebar looks fine on the Home page, but as soon as you click on a menu item, the following page has a different menu style. Apparently my CSS or menu templates or both were altered in some way during the upgrade process.

Not sure where to start.

Previously the menu would display indented sub-menus of the main pages once you clicked on the main page that had child pages. This no longer is the case. The sub-menu gets displayed, but it is no longer indented and the entire menu is rendered in a larger font size with left justification, less margin.

I could use a little help.

The site is http://www.fcap.org

Here is what the page looks like when in Edit Content>Preview and this is how it used to look prior to the upgrade.



This is how it actually looks online



Here is my current Sub Navigation menu code for the template I am using...

Code: Select all

      <!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>

          <!-- NB! The <ul><li> below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list -->
          <ul><li>
               {menu template='simple_navigation.tpl' start_element='4.1' show_root_siblings='1'  collapse='1'}
           </li></ul>
          <br />
      <hr class="accessibility" /><br /><br />
      </div>

I've also noticed some irregularity on the HTML being generated. Here is the HTML from the sub nav on the Home Page...

Code: Select all

<!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>

          <!-- NB! The <ul><li> below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list -->
          <ul><li>
                


<ul>
</li></ul>
</li>

<li class="sectionheader"><span>FCAP Main Menu</span>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://www.fcap.org/index.php?page=about-fcap"><span>About FCAP</span></a>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://www.fcap.org/index.php?page=resources"><span>Resources</span></a>


</li></ul>
</li>

<li class="parent"><a class="parent" href="http://www.fcap.org/index.php?page=prayer"><span>Prayer</span></a>


</li></ul>
</li>

And here is the same sub nav HTML code from another page. Notice how the list items code is different and lacking the same ul and li elements that the Home page has. I can't even figure out how this is happening since both pages are presumably using the same template.

Code: Select all

<!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>

          <!-- NB! The <ul><li> below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list -->
          <ul><li>
                


<ul>

<li class="sectionheader"><span>FCAP Main Menu</span>


</li>

<li class="parent"><a class="parent" href="http://www.fcap.org/index.php?page=about-fcap"><span>About FCAP</span></a>


</li>

<li class="parent"><a class="parent" href="http://www.fcap.org/index.php?page=resources"><span>Resources</span></a>


</li>

<li class="parent"><a class="parent" href="http://www.fcap.org/index.php?page=prayer"><span>Prayer</span></a>


</li>

[Mantlet]

Hey Mike,

Are you using one template for all pages?

The menumanager seems to close the <ul> on the subpages. That way the subpages don't get within two <ul> codes, but just one. That's why they all look like top pages.

You are using a .tpl template. That means it's a file that gets updated when a new version is added to CMSMS. If the code in the .tpl file got changed there is a chance that is causing this behavior.

With the menumanager you can import the template into the database. Then you can edit the menu template and make it look like it used to. You just need to remove the ".tpl" extension from your template call to the menu. Then you call a database template instead of a file based template.

If you've never changed a menutemplate, you can also consider getting the old .tpl file back by downloading it from the old version. All versions are still available here:

Code: Select all

http://dev.cmsmadesimple.org/project/files/6

Only upload the right .tpl file to your CMS, not the whole old version off course.

Good Luck!

[cnymike]

Everything you've explained makes sense. Thank you very much. I'll see if following your suggestions fixes my menu issues. Thanks again. I'll post back when I've had the time to initiate the changes and update the situation.

[cnymike]

OH, I should have also mentioned that all pages -are- using the same template. That's why I do not understand how the menu function and appearance could change from home page to all the other pages. It's probably easily explained, but it's opaque to me.

I'm also curious as to why the menu looks fine when viewing it in Edit Content>Preview, but it doesn't look the same when viewed from the actual webpage (see images in my first post)

Nonetheless, I will follow your suggestions and report back.

[cnymike]

@Mantlet It was indeed the template causing this. did fix it using your tips as a starting point. thank you for solving my mystery.