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. Change the width of the logo

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

FavThemes code logo

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

where span3 is the Bootstrap class that controls the width of the logo, so changing span3 to another value changes the width of the logo. For example, to make the logo wider change span3 to span4 and to make the logo narrower change span3 to span2.

The values that can be assigned to the span class are from 1 to 12.

3. Change the width of the navigation

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

FavThemes code navigation

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

If the logo and navigation are side by side, when changing the width for the logo, you also have to change the width of the navigation. The rule is that the span number for the navigation and the span number for the logo have to sum up to 12.

The initial values for the width of the logo and the width of the navigation are span3 and span9, so 3+9=12. Following this logic, if you change the logo to:

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

then you would have to also adjust the width of the menu, so 12-4=8:

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

Save your changes and reload the front-end of your website to see the new widths for your logo and main navigation for the desktop view.

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.