We are Underground support

Centering the Logo and Navigation ( legacy themes )

Last Updated: Apr 24, 2017 02:49PM EDT

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:

float: left;

On line: 1306 change this:

list-style: none;

to this:

list-style: none; text-align: center;

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

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
  • Ask a theme support question
  • Support Hours:
    9:30 - 17:30 EST
    Monday - Friday

retail@undergroundmedia.co.uk
http://assets3.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete