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 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">

where span9 is the Bootstrap class that controls the width of the navigation, so changing span9 to another value changes the width of the navigation. For example, to make the navigation wider change span9 to span10 and to make the navigation narrower change span9 to span8.

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

3. 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">

If the logo and navigation are side by side, when changing the width for the navigation, you also have to change the width of the logo. 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 navigation and the width of the logo are span9 and span3, so 9+3=12. Following this logic, if you change the navigation to:

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

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

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

Save your changes and reload the front-end of your website to see the new widths for your main navigation and logo 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.