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:
Access the template's files and folders, open the index.php file and find this code, usually on line 240:
<div id="fav-logo" class="span3">
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
span4 and to make the logo narrower change
spanclass are from 1 to 12.
Access the template's files and folders, open the index.php file and find this code, usually on line 273:
<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
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.