How to center logo on "Supply" Theme

Highlighted
New Member
1 0 1

I have very limited coding knowledge and was hoping someone can help me to get my logo centered in the Supply theme. I already got the main menu centered but cant figure out the logo. All help is very much appreciated!!!

1 Like
Highlighted
Tourist
8 0 1

I've not looked at this one myself but AAIU for quite a few themes you can't centre the logo without knowing how to code.

Someone else will probably have the absolute answer for you, however.

0 Likes
Highlighted
New Member
1 0 0

I would like to know how to do this also. Thanks in advance.

 

Jeffod, how did you center the main menu?

0 Likes
Highlighted
New Member
3 0 0

same here please

0 Likes
Highlighted
Shopify Partner
86 3 19

Hey there,

can you please add a screenshot of what you are trying to center?

I could probably help you out.

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
3 0 0

Hey,

My store is www.epiphanyjewellery.com, password "entrar".

Screenshot attached:  where you see "Epiphany Jewellery" at the top, that's a picture and I'd love to center it, as well as the menu items.

Thanks!

0 Likes
Highlighted
Shopify Partner
86 3 19

Hey there,

centering menu is easy: 

1. Find the following code: " @media screen and (min-width: 769px) .site-nav" in the "theme.scss.css". Change this code :

text-align: left;
white-space: nowrap;
margin-left: -15px;

to this:

text-align: center;
white-space: nowrap;
margin-left: -15px;

For the logo to centered you need to do the following :

1. Find the "sections/header.liquid" file in the  "editing the HTML/CSS" menu

2. Find this code inside that file : "<div class="grid--full">", after it add the following code : "<div class="grid-item large--one-third"/>" 

3. Find this code inside that file : "large--one-half" and replace it with "large--one-third".

This will divide the space in the header into three equally wide divs and your Company Logo will be in the middle div - hence centered. You might want to remove this : "large--text-right" from the third div, the one with the cart and currency selection, but that's up to you to see if you like it or not.

Let me know if this helps.

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
New Member
3 0 0

Hey Alexandru,

 

Thanks for your response. My CSS file seems to be different from yours, this is what I got:

$min: min-width;
$max: max-width;
@mixin at-query ($constraint, $viewport1, $viewport2:null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

regarding the logo, I found exactly what you said but nothing changed - seem to be doing something wrong. could you help please?

thanks,

Joana

0 Likes
Highlighted
Shopify Partner
86 3 19

Hey,

look for this : 

.site-nav {
    text-align: left;
    white-space: nowrap;
    margin-left: -$gutter/2;

    & > li {
      position: relative;
      display: inline-block;
    }

    a {
      white-space: nowrap;
    }

  }

and replace "text-align: left" with "text-align: center"

Regarding logo, it looks like you forgot to add the extra div at the begining, so the start of header.liquid will look like this :

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="wrapper">

    <div class="grid--full">
      <div class="grid-item large--one-third"></div>
      <div class="grid-item large--one-third">
        {% if template.name == 'index' %}

 

Alex Dereveanco | CMO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like
Highlighted
Tourist
51 0 2

how can i just have my logo just the on top and the rest of the searchbar, currency and cart button on second ont he second level??

0 Likes