How to customize the content of navigation menu in Liferay

RE: How to customize the content of navigation menu in Liferay

2017-09-12T09:27:47Z

Hi Massimo,

Yes, you are right. Your code is responsive to mobile.

Therefore, together with what's in https://web.liferay.com/community/forums/-/message_boards/message/94161220, I have add the following code in sitepages.ftl in the templates folder in a custom theme to customize my navigation menu.


<div aria-expanded="true" class="collapse navbar-collapse" id="navigationCollapse">
<ul class="nav navbar-nav">    
        &lt;#assign  count = 0 /&gt;
        &lt;#list nav_items as nav_item&gt;
            &lt;#assign  count = count +1  /&gt;
            &lt;#assign  nav_item_class = "item-" + count /&gt;
    
            &lt;#if count == 1&gt;
                &lt;#assign  nav_item_class = nav_item_class + " first" /&gt;
            <!--#if-->

            &lt;#if nav_item.isSelected() &gt;
                &lt;#assign nav_item_class = nav_item_class + " selected" /&gt;
            <!--#if-->
            
            <li class="${nav_item_class}">
                <a href="${nav_item.getURL()}" ${nav_item.gettarget()}>
                    <span>${nav_item.getName()}</span>
                </a>
            </li>
            
            &lt;#if nav_item.hasChildren()&gt;
                &lt;#list nav_item.getChildren() as nav_child&gt;
                   &lt;#if nav_item.isSelected()&gt;
                        <li class="selected sub">
                        </li>
                    &lt;#else&gt;
                       <li class="sub">
                    <!--#if-->
                            <a href="${nav_child.getURL()}" ${nav_child.gettarget()}>${nav_child.getName()}</a>
                        </li>
                <!--#list-->
            <!--#if-->
        <!--#list-->
    
		&lt;#assign linkUrl = themeDisplay.getPortalURL() /&gt;
        
		&lt;#assign screenName = themeDisplay.getUser().screenName /&gt;
		
			<li class="${nav_item_class}">
				<a href="${linkUrl}/user/${screenName}">My Dashboard</a>
			</li>
		
			<li class="${nav_item_class}">
				<a href="${linkUrl}/web/lportal/sign-out">Sign Out</a>
			</li>
  </ul>
    </div>

Also remember to apply the sitepages.ftl in portal_normal.ftl by changing the code like:


					&lt;#if has_navigation&gt;
						&lt;#--include "${full_templates_path}/navigation.ftl" /--&gt;
						&lt;#include "${full_templates_path}/sitepages.ftl" /&gt;
					<!--#if-->

You really save my day, thank you very much! Expert!

All the best,
Karl Chin

RE: How to customize the content of navigation menu in Liferay

2017-09-12T07:33:51Z

Hi,

are you sure it is not responsive?I use sitepages in my theme and it is responsive.

By the way if you need to customize navigation menu you can change navigation.ftl, sitepages.ftl and put your css style inside _custom.scss.

My suggestion is: take an existing free theme (porygon or 1975 London) and look inside the code(templates, css....) in this way you can understand how customize navigation menu(in porygon theme you can find _header.scss and _navbar_porygon.scss).

Best regards

Massimo

RE: How to customize the content of navigation menu in Liferay

2017-09-12T04:41:02Z

Hi Massimo,

You code in sitepages.ftl will work on web, however, it is still not mobile responsive.

I can see there is a code in navigation.ftl.


		&lt;@liferay.navigation_menu
			instance_id="main_navigation_menu"
			default_preferences="${freeMarkerPortletPreferences}"
		/&gt;

I am wondering if we can customize it (liferay.navigation_menu)?

I can only see some guideline on the customization of product menus. (https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/product-navigation)

All the best,
Karl Chin

RE: How to customize the content of navigation menu in Liferay

2017-09-11T10:40:17Z

I have never overide liferay JS, I only added some function inside my code.
Try to write your function and add it inside your sitepage.ftl otherwise you can search on google how to insert your js file in liferay

RE: How to customize the content of navigation menu in Liferay

2017-09-11T09:45:01Z

Hi Massimo,

Thanks for your code.

Can I just change some .js to fulfill the customization on the content of the navigation menu? Actually, I am trying to search in the source but not yet identified which one does the work.

All the best,
Karl Chin

RE: How to customize the content of navigation menu in Liferay

2017-09-08T06:47:35Z

Hi,

I guess I found it in a theme called atrek and the file is "sitepages.ftl"

put it inside templates folder

<h2><span>Site Pages</span></h2>
	<ul>
		&lt;#assign  count = 0 /&gt;
		&lt;#list nav_items as nav_item&gt;
			&lt;#assign  count = count +1  /&gt;
			&lt;#assign  nav_item_class = "item-" + count /&gt;
	
			&lt;#if count == 1&gt;
				&lt;#assign  nav_item_class = nav_item_class + " first" /&gt;
			<!--#if-->
	
			&lt;#if nav_item.isSelected() &gt;
				&lt;#assign nav_item_class = nav_item_class + " selected" /&gt;
			<!--#if-->
			
			<li class="${nav_item_class}">
				<a href="${nav_item.getURL()}" ${nav_item.gettarget()}>
					<span>${nav_item.getName()}</span>
				</a>
			</li>
			
			&lt;#if nav_item.hasChildren()&gt;
				&lt;#list nav_item.getChildren() as nav_child&gt;
					&lt;#if nav_item.isSelected()&gt;
						<li class="selected sub">
					&lt;#else&gt;
						</li><li class=" sub">
					<!--#if-->
							<a href="${nav_child.getURL()}" ${nav_child.gettarget()}>${nav_child.getName()}</a>
						</li>
				<!--#list-->
			<!--#if-->
		<!--#list-->
	</ul>

RE: How to customize the content of navigation menu in Liferay

2017-09-08T04:02:43Z

Hi Massimo,

I cannot find site_pages.ftl in the source. Where is the file location? under ../templates? Could you please provide some sample code on that?

TIA.

All the best,
Karl Chin

RE: How to customize the content of navigation menu in Liferay

2017-09-07T09:13:14Z

I don't know if I understand your question...but try also to check site_pages.ftl

How to customize the content of navigation menu in Liferay

2017-09-07T08:17:05Z

Hi Experts,

I am working on a portal project using Liferay 7 GA4. How can I customize the navigation menu?

I have checked navigation.ftl in a theme project and there is a section for showing the menu.


&lt;@liferay.navigation_menu
			instance_id="main_navigation_menu"
			default_preferences="${freeMarkerPortletPreferences}"
		/&gt;

After some googling, hook may be a direction. However, it is also said that OSGi module is the preferable way for customization.

Therefore, here is the question:
Which jsp is being used to control the behavior of com.liferay.site.navigation.menu.web OSGi module?

All the best,
Karl Chin