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

One 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

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

This 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.

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