Edit CSS to Increase Logo

Tourist
12 0 2

Does anyone know how to modify the CSS on the Minimal theme to allow you to increase the size of the logo?  Right now the Minimal theme is capping my width at 300px when I use right aligned navigation.  I need it to be ~400 or so. 

See SportLeash.com for reference. 

Thanks!!

0 Likes
New Member
4 0 0

Hi Reynold, try this:

In the template editor of your theme go to the styles.css.liquid asset. There do a search for the line containing this piece of code: .logo a, .logo img { display:block; margin:0; }

Add to this line a width of 400. After you've done so it should look like this: .logo a, .logo img { display:block; margin:0; width: 400px; }

I hope this works for ya!

Leon

0 Likes
Shopify Expert
9981 84 1492

The advice above won't quite work as you expect (things will flow over each other).

The theme is built within a 12 step grid. The navigation is set within a block with a size 9 (span9) and the logo a size of 3 (span3). Changing the widths as noted above won't work - you'll need to change the grid itself.

So this:

<div class="span3 inner-left"><div class="logo">

to:

<div class="span4 inner-left"><div class="logo">

and this:

<section id="nav"><div class="span9 inner-right">

to:

<section id="nav"><div class="span8 inner-right">

This is only the first step however. You'll likely find this change breaks the responsive styles at smaller sizes. You'll need to tinker with it. Be sure to make these changes in a theme copy.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Tourist
12 0 2

Thanks guys...these work well for the desktop version I'm looking at...any idea how to refine for the mobile/responsive layouts though...there's definitely still some overlapping. 

0 Likes