Fashionopolism Theme: Centering the Logo and Navigation ( legacy themes )

Fashionopolism v4.1 release on the 24th May 2016 includes options to arrange the alignment of the logo and navigation by default.

If you are using an earlier version and do not want to update this guide is designed to help you make the adjustments for a centered logo.

To Center the logo and Navigation in the Fashionopolism theme a few quick code changes are needed.

In the admin click on themes > customise theme > theme options > edit HTML / CSS
On the next page open: Layouts > theme.liquid and go to line: 182 – 202 and replace this:

<div id="identity" class="row">        
<div id="logo" class="desktop-7 tablet-6 mobile-3">       
{% if settings.use_logo_image %}
<a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"/></a>
{% else %}
<h1><a href="/">{{ shop.name }}</a></h1>
{% endif %}           
</div>  
<ul id="social-links" class="desktop-4 mobile-3">
{% if settings.show_facebook %}<li><a href="{{ settings.facebook_url }}" target="_blank"><i class="fa fa-facebook"></i></a></li>{% endif %}
{% if settings.show_twitter %}<li><a href="http://www.twitter.com/{{ settings.twittername }}" target="_blank"><i class="fa fa-twitter"></i></a></li>{% endif %}
{% if settings.show_pinterest %}<li><a href="{{ settings.pinterest_url }}" target="_blank"><i class="fa fa-pinterest"></i></a></li>{% endif %}
{% if settings.show_tumblr %}<li><a href="{{ settings.tumblr_url }}" target="_blank"><i class="fa fa-tumblr"></i></a></li>{% endif %}
{% if settings.show_youtube %}<li><a href="{{ settings.youtube_url }}" target="_blank"><i class="fa fa-youtube"></i></a></li>{% endif %}
{% if settings.show_googleplus %}<li><a href="{{ settings.googleplus_url }}" target="_blank"><i class="fa fa-google-plus"></i></a></li>{% endif %}
{% if settings.show_instagram %}<li><a href="http://instagram.com/{{ settings.instagram-id }}" target="_blank"><i class="fa fa-instagram"></i></a></li>{% endif %}
</ul>                
</div>

With this:
         <div id="identity" class="row">        
          <div id="logo" class="desktop-4 desktop-push-4 tablet-2 tablet-push-2 mobile-3">       
            {% if settings.use_logo_image %}
            <a href="/"><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"/></a>
            {% else %}
            <h1><a href="/">{{ shop.name }}</a></h1>
            {% endif %}           
          </div>  


          <ul id="social-links" class="desktop-4 tablet-2 mobile-3">
            {% if settings.show_facebook %}<li><a href="{{ settings.facebook_url }}" target="_blank"><i class="fa fa-facebook"></i></a></li>{% endif %}
            {% if settings.show_twitter %}<li><a href="http://www.twitter.com/{{ settings.twittername }}" target="_blank"><i class="fa fa-twitter"></i></a></li>{% endif %}
            {% if settings.show_pinterest %}<li><a href="{{ settings.pinterest_url }}" target="_blank"><i class="fa fa-pinterest"></i></a></li>{% endif %}
            {% if settings.show_tumblr %}<li><a href="{{ settings.tumblr_url }}" target="_blank"><i class="fa fa-tumblr"></i></a></li>{% endif %}
            {% if settings.show_youtube %}<li><a href="{{ settings.youtube_url }}" target="_blank"><i class="fa fa-youtube"></i></a></li>{% endif %}
            {% if settings.show_googleplus %}<li><a href="{{ settings.googleplus_url }}" target="_blank"><i class="fa fa-google-plus"></i></a></li>{% endif %}
            {% if settings.show_instagram %}<li><a href="http://instagram.com/{{ settings.instagram-id }}" target="_blank"><i class="fa fa-instagram"></i></a></li>{% endif %}
          </ul>                

        </div>

Click save when done.

Now open: Assets > stylesheet.css.liquid and go to line: 1275

Change this:

#logo { line-height: initial; }


to this:

#logo {line-height: initial; text-align: center;}


On line: 1312 delete this:

<span style="color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; line-height: 19.5px;">float: left;</span>


On line: 1306 change this:

<span style="color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; line-height: 19.5px;">list-style: none;</span>


to this:

<span style="color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; line-height: 19.5px;">list-style: none; text-align: center;</span>



Click save when done – this will center the logo and navigation.