How to Convert Your Primary ocPortal Menu to a Full Width Dropdown Menu

dropdown menuOne change I like to make on most of the sites I build using ocPortal is to convert the standard menu to be a full width dropdown menu. Using this type of menu gives you a great deal of flexibility in the long term as your site grows, and allows you the freedom of being able to expand your primary navigation if you need to.

ocPortal includes the coding, and there are CSS styles for the elements within the global.css file. You will probably want to change the CSS style if this is to be used on your main navigation.  I also like to move the menu further down the website design, to give me a little more freedom for my logo and header information.

Before you start making any changes to the templates you will want create a new menu. To do this you need to navigate to the menu management screen which is located in the adminzone in the structure section.

In this section you will need to create a new menu. For this example I have called it Top_menu

Look for this code:

<div>                  {$BLOCK,block=side_stored_menu,param=zone_menu,type=zone}                         </div>

On an unedited file the code should start on line 27. Line numbers can be found on the left of the editing screen within ocPortal. There are two parts of this code you need to change; these are:-

  • param=zone_menu
  • type=zone

You need to change the zone_menu to be the name of your new menu which in this case is top_menu, and you need to change the type=zone to be type=dropdown

The new code will look like this:

<div>          {$BLOCK,block=side_stored_menu,param=top_menu,type=dropdown}                       </div>

Your next task is to edit the CSS of your theme to move the drop down below the logo. Go to the themes section of the adminzone and choose to edit the CSS. Pick Global CSS and you need to find:-


global Navigation CSSThis can be found on a new install around line 462 (on version 9.0.6). You will need to edit two elements which are both in the “{+START,IF,{$NOT,{$MOBILE}}}” section. The main-top element needs to be changed from 66px to at least 89px and the padding in this section should be changed to “0px 0px 0px 0px”. They will look like the following:-

margin-top: 89px;
padding: 0px 0px 0px 0px;

This will move the navigation below the logo and also remove the padding around the new dropdown menu, which will enable styling to be completed more easily. The styling for the menu styles can be found starting from around line 3035. I recommend using the contextual CSS editing tool which can be found in the footer of your website. More information on customising your theme can be found in this tutorial about customising your ocPortal theme.

If you want, you can  or Follow me on Twitter

Looking for quality ocPortal Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under ocPortal | RSS 2.0

Author Spotlight

Steve Jarvis

Hi I'm Steve, I've been using computers in one form or another since i was 5 with a Dragon 64 and building websites since the late 90's. I'm currently employed as a digital marketing person for Planet X Bikes. When not writing blog posts or working i'm a family man (Wife and Daughter) and a PC Gamer

Leave a Reply

Your email address will not be published. Required fields are marked *

− 5 = 1

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>