Menus are an important part of a site. OpenCart has some default menus. We will style it in this recipe. div4 class contains the navigational menus. Earlier, we saw top right navigational menus. Now, we will see main navigational menus.
1. Getting started
We need to open up our stylesheet, stylesheet.css, in our favourite editor. Go to catalog\view\theme\shop\stylesheet.
2. How to do it
We will go with the following steps:
- Now, we make style changes for the div4 The div4 class contains the navigational menus. We change the padding-right property to 14%.
#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14%;
}
- This will bring the menus down a You can find the changes like this:
- We want to show our header a little So, we add a padding-top attribute to the div4 class in the stylesheet. So, the style code for div4 class becomes like this:
#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14%;
padding-top: 100px;
}
- And this makes our site look like the following image:
- Now, the logo moves to the center of the header.
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.