How to enlarge logo for FULL WIDTH navigation

For templates that have the logo that is part of the menu bar, the logo is set at a very specific size and to keep the style of template intact.

If you make the logo too large, then the size (especially the height) of the navigation bar will be altered in order to compensate for the increased height of the logo and as a result, the template design may be compromised.

It is possible to change the size of the logo, but just note that this may potentially alter the design of the navigation bar of the theme.  Here are the instructions:

1) In index.html, locate this code:

<div id=”logo”>{logo max-width=”250“}</div>


Since the DivTag theme has multiple page layouts, you need to repeat this process in all of the HTML pages of all the page layouts.The current width is set at 250**, you can change the number to something larger to allow for a larger logo.
** Different theme may have a different default size setting. The default number is not important, what is important is to identify the {logo} code.


2) In the main_style.css, locate these two codes:


a) Editing LOGO
width: 24%;
padding-right: 2%;
vertical-align: middle;
text-align: left;
The theme is responsive. So depending on the size of  monitor, the size of the logo will change accordingly. In the html code, you can change to a specific logo size, but that number varies with the size of monitor used to. Here you can change the percentage of the logo area.


b) Editing Navigation Bar size
The logo and navigation bar are on the same line. If the logo size is increased, the navigation bar needs to be decreased in width to accommodate for the larger logo size. If this is not done properly, the navigation bar will be pushed to the next line, which is what you have now.
width:  74%;
vertical-align: middle;
What ever percentage you have changed in STEP A, you need to change here. For example, if you have increased the logo area by 5%, in the navigation code, decrease the width by 5%.

Tags: ,