Forum Discussion

lydiar's avatar
lydiar
Adept
12 years ago

Edit/duplicate the “menu-bar” component

Is there a way to edit the edit the “menu-bar” component, or create a duplicate of it somehow?

8 Replies

Sort By
  • YuriK's avatar
    YuriK
    Khoros Expert
    12 years ago
    Hey Lydiar,

    You can only "skin" (edit) the menu bar using css. You can duplicate the menu bar for a given page where it's allowed by going to xml view of the page and adding the following wherever you want it to be duplicated:

    <component id="menu-bar"/>

    Hope this helps,

    Yuri
  • Ania_Ciuba's avatar
    Ania_Ciuba
    Genius
    12 years ago

    Hi,

    I've tried inserting the menu bar component in the Recent Posts Page's XML and it gives me an error. Any idea why?

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    12 years ago

    Hi Ania,

     

    I think it would be best to raise a support ticket so that our engineers can look into the logs and confirm exactly what the issue is, or maybe provide more details about the error message you are getting.

     

    I believe in this case it could be that the Recent Post page already includes the the menu bar component within the post list by default, and therefore adding it again is creating an error.

     

    Hope that helps,

  • Ania_Ciuba's avatar
    Ania_Ciuba
    Genius
    12 years ago

    Hi Paolo,

    This is the XML I have before I add the menu bar component:

     

    <quilt layout="one-column" nestable="false">
      <add to="common-header">
        <component id="quilt:Header"/>
      </add>
      <add to="main-content">
        <component id="post-list"/>
      </add>
      <add to="common-footer">
        <component id="quilt:Footer"/>
      </add>
    </quilt>

     

    And here's the XML that's causing the problem:

     

    <quilt layout="one-column" nestable="false">
      <add to="common-header">
        <component id="quilt:Header"/>
      </add>
      <add to="main-content">
    <component id="menu-bar"/>
        <component id="post-list"/>
      </add>
      <add to="common-footer">
        <component id="quilt:Footer"/>
      </add>
    </quilt>

     

    so as it seems to me, there's no menu bar there yet.

     

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    12 years ago

    Hi Ania,

     

    thanks for your clarification. What I meant is that the menu bar functionality could be embedded already within the "post-list" component (you wouldn't see that from the XML definition of the page) - let's see what support says here.

     

    Regards,

  • dhiraj_gophane's avatar
    dhiraj_gophane
    Leader
    12 years ago

    Hi Ania,

    You can also try to do this using jQuery.

     

    following function can clone/duplicate any item on the page, you just need to pecify the class and id of that element.

     

    jQuery( "class/id" ).clone().appendTo( "class/id" );

     

    example: following line duplicates Topic option drop down

     

    jQuery("#dropDownLink_0.lia-js-menu-opener.default-menu-option.lia-js-click-menu.lia-link-navigation").clone().appendTo(".lia-menu-bar.lia-menu-bar-bottom.bottom-block.lia-component-message-list");

     

    Make sure you use "." before class and "#" before id