1. How to access the template's files and folders

All the code changes are made using the template's files and folders. To access the files and folders for our templates, go to EXTENSIONS/TEMPLATES/TEMPLATE and access the template you want to edit:

FavThemes code template files

2. Find the code for the header of the template

Access the template's files and folders, open the index.php file and find this code, usually on line 234:

FavThemes code header

3. Change the code for the header of the template

To make the logo and navigation have the full width of the header and stack on top of each other instead of being positioned side by side, make sure you make the following code changes inside the index.php file:

FavThemes code header logo navigation full width

1 Step 1

<div id="fav-header" class="span12 clearfix">

change it with:

<div id="fav-header" class="clearfix">

2 Step 2

<div id="fav-logo" class="span3">

change it with:

<div id="fav-logo" class="span12">

3 Step 3

<div id="fav-nav" class="span9">

change it with:

<div id="fav-logo" class="span12">

4. Change the CSS for the header of the template

Access the CSS folder inside the template's files and folders and open the custom.css file which is a special file created to be used for all the custom CSS code changes:

FavThemes code header custom css

Access the template's files and folders, open the custom.css file and add this code:

1 Style the logo

#fav-logo {
    text-align: left;
}

In the code above, the left value can be changed with center or right to align the logo in the center or to the right:

#fav-logo {
text-align: center;
}

or

#fav-logo {
text-align: right;
}

2 Style the main navigation to the left

Use this code to align the main navigation to the left:

#fav-nav {
    margin-left: 0;
}
.favnav {
    float: left;
}

3 Style the main navigation in the center

Use this code to align the main navigation in the center:

#fav-nav {
    margin-left: 0;
}
.favnav {
    z-index: 100;
position: relative;
display: table;
margin: 0px auto;
padding-bottom: 0px;
float: none !important;
}
These changes do not affect the mobile or tablet versions of the template.

The Joomla! name is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries. FavThemes is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.