How to Enlarge Logo for Storyboard

The Storyboard logo is set at a very specific size and this is designed to keep the style of Storyboard theme intact.  If you make the logo too large, then the size (especially the height) of the fixed 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 Storyboard.  Here are the instructions:

1) In index.html, locate this code:


Click to Enlarge

Click to Enlarge

<div>{logo max-height=”60″ max-width=”180“}</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 {
  position: absolute;;
  bottom: 0;
  z-index: 11;
  color: #ffffff;
  padding: 5px 10px;
  max-width: 180px;
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.
.nav-frame {
margin-left: 200px;
To prevent the navigation bar overlapping the logo, you will need to change the margin size. The new size will be
logo width + 20px
For example, if your new logo width is 380px. Your margin will be 380px + 20px = 400px.