WE CRAFT RESPONSIVE TEMPLATES & EXTENSIONS

Awesome Features

of our templates

Responsive

 

Smart template that adapts and resizes itself to desktop and mobile devices.

Module Positions

 

Easily organize the content of the website using 40+ Module Positions.

Parameters

 

Choose from an extensive set of parameters for easy and fast customization.

K2 Support

 

Full compatibility with K2, the powerful content extension for Joomla!

Logo Options

Upload your own logo image or use a text logo that supports Google Fonts.

Font Awesome

 

Add any icon from Font Awesome to your module title and website content!

Google Fonts

 

Choose any font from Google Web Fonts and use it to customize your website.

Typography

 

A great way to customize the appearance of content elements of your site.

10 Color Styles

 

10 Color Styles designed to give you a myriad of posibilities and flexibility.

This tutorial explains how to adjust the width of the menu in the templates where the menu is floated to the right of the logo.

1. Step 1

Open the TEMPLATE MANAGER:

2. Step 2

Select the TEMPLATES view and access the DETAILS AND FILES of the template:

3. Step 3

Access the EDITOR tab to edit the index.php file:

4. Step 4

Open the index.php file and find this line of code:

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

where "span9" is the Bootstrap class that controlls the width of the menu, so changing "span9" to another value changes the width of the menu. For example, to make the menu wider change "span9" to "span10" and to make the menu narrower change "span9" to "span8". The values that can be assigned to the "span" class are from 1 to 12.

5. Step 5

When changing the "span" class value for the menu, you also have to change the width of the logo. The rule is that the "span" number for the menu and the "span" number for the logo have to sum up to 12. First, you have to find the logo code that controlls the logo width:

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

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

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

then you would have to also adjust the width of the logo, 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 menu and logo for the desktop view. These changes do not affect the mobile version of the template.

Please note that this tutorial applies only to the templates where the menu and logo are side by side, one to the left and one to the right, for example in templates like Favourite and Viewpoint. This does not apply for templates where the logo and the main navigation are stacked up vertically and are one on top of the other, like the Starter template.

Awesome Features

of our templates

Responsive

 

Smart template that adapts and resizes itself to desktop and mobile devices.

K2 Support

 

Full compatibility with K2, the powerful content extension for Joomla!

Parameters

 

Choose from an extensive set of parameters for easy and fast customization.

10 Color Styles

 

10 Color Styles designed to give you a myriad of posibilities and flexibility.

Google Fonts

 

Choose any font from Google Web Fonts and use it to customize your website.

Module Positions

 

Easily organize the content of the website using 40+ Module Positions.

Logo Options

Upload your own logo image or use a text logo that supports Google Fonts.

Font Awesome

 

Add any icon from Font Awesome to your module title and website content!

Easy & fast customization

using the template parameters

The Joomla! logo 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.