Search code examples
liferayliferay-6

Adding MenuBar to the Portal Page

I need to display a MenuBar on the Liferay Portal Page (A menuBar which will be common to all portlets in that page)

For this, I have created a custom Theme, and modified the navigation.vm file under the templates folder.

I have added this below MenuBar code inside the navigation.vm file and deployed it to the server 

<html>
<head>

<title>Menu Bar Using CSS</title>

<style>
.menu ul
{
list-style: none;
}

.menu ul li
{
display: inline;
}

.menu ul li a
{
/*Increase Clickable Area*/
padding: 8px;
padding-left: 15px;
padding-right: 15px;

/*Remove the Underline for the Link*/
text-decoration: none;

color: #000;
background: #ccc;
}

/*On Mouse Over the Link*/
.menu ul li a:hover
{
color: #fff;
background: #000;
}
</style>

</head>

<body>
<div class="menu">

<ul>

<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

</ul>
</div>
</body>
</html>

I have put all these code under the navigation.vm file under my Applied Custom Theme, but it didn't worked (I mean the Menu Bar is not shown on the Portal page)

Please let me know if I am doing anything wrong.

Solution
    1. navigation.vm does not contain <html>,<head> and <body> tags, these go inside the portal_normal.vm or if the page is a pop-up then portal_pop_up.vm. This file (navigation.vm) just helps in displaying the pages and is included inside the portal_normal.vm file.
    2. So try moving your code inside portal_normal.vm for the menu-bar.

    Hope this helps.