Header Structure in OpenCart: Styling top navigation

In this recipe, we will style the top right navigation of our store shop. We are going to create a background image for it. We will use GIMP for this purpose. Also, we apply some styling to the div3 class. This class holds the top right navigational block.

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

Let’s do the following steps:

1. As we have seen earlier, div1 class consists of several other We will change the properties of each sub class. Now, we will change the div3 class styles of the header.

2. We will use a background image for this class. Let’s create that image with First, we will set the height and width of the image. We set it 65px and 40px respectively.

3. Select the bucket fill tool from the toolbox:

4. From the color panel, we select color #d1d4d4. But, you can choose your favorite color. Now, fill our image with the selected color. It will become like this:

5. We will apply some effects with So, select the brush icon:

6. There are many different types of Also, we can make our own. But for now, we will use square (10×10):

7. We are going to use the selected brush with a selected Click the color panel again. We will choose #f6d666. Our image icon becomes like this:

8. Now, we will use this image as the background image for the div3 We’ll add a background image property to the stylesheet. We named the image as top-nav.png and placed it under the catalog\view\theme\sho\image. So, the style code becomes the following for the div3 class:

#header .div3 {

float: right;

padding-top: 7px;

height: 38px;

background: transparent url(‘../image/top-nav.png’) repeat-x;

}

9. We repeat the image towards the x In the browser, we see the changes of the div3 class:

10. To adjust the position of div3 class, we need to make some changes to the margin-left attribute—we remove that and use margin for it.

#header .div3 a {

margin: 15px;

padding: 1px 0px 2px 20px;

background-repeat: no-repeat;

background-position: left center;

}

11. The div3 class will be shifted to left See the following image:

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.