Enlarge logo for full width navigation bars – Drops, Habitu, DejaVu

1. Click open the code editor. On the left hand column you will find the list of the page layouts. Click into the page you want to customize the logo size limit. In this example, we will choose the landing.html

2. Edit LOGO HTML code

In the page layout html codes, locate this:

{logo max-width=”250“}

Here the max width and height is defined. You can alter the number to change the limit.

3. Repeat step2 in all of the page layout you want to customize the logo size limit.

4. Edit LOGO CSS codes

Click into “main_style.css” and locate this code:

#logo{
width: 24%;
padding-right: 2%;
vertical-align: middle;
text-align: left;
}

The full width navigation is responsive. So there are no specific width to set. It is all set in percentage. Here you can change the percentage of the width to any decimal point or whole numbers.

5. Edit NAVIGATION MENU CSS codes

When you change the width of the logo, you have to do the reverse for the navigation menu. For example, if you enlarge the logo width, you have to PROPORTIONATELY decrease the navigation menu width by the same amount.

Here locate this code:

.navigation{
width: 74%;
vertical-align: middle;
}

If you have increased 2% in logo width, here you should decrease 2% in the navigation width.

6) Save and re-publish your site for the change to take effect.

Tags: , ,