How to Enlarge Logo in Navigation Area

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 Scoop.  Here are the instructions:

1) In index.html, locate this code:

Click to Enlarge

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


Since the Scoop 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 300, you can change the number to something larger to allow for a larger logo.


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


a) Editing LOGO
#logo {
  padding: 10px 0;
  margin-right: 20px;
  font-weight: bold;
  max-width: 300px;
  float: left;
What ever number you inserted in Step 1, repeat here.


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.
#navigation {
width: 730px;
float: right;
The total width is 980px. There is a 20px gap between the logo and the navigation items. The default setting of the navigation bar is 730px as shown above. When you enlarge the logo size, make sure you also change the width of the navigation to accommodate the change.

Tags: , , , , , ,