We are Underground support

Centering the Logo and Navigation

Last Updated: Aug 25, 2016 09:22PM EDT

Looking to access your theme's code or language options with Shopify's new theme editor layout?

In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language

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?
retail@undergroundmedia.co.uk
http://assets1.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