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.