want to center the logos between menus on prestige theme

want to center the logos between menus on prestige theme

shivam
Shopify Partner
1 0 0

shivam_0-1720168605580.png

like this 

 

Reply 1 (1)

oscprofessional
Shopify Partner
16006 2396 3106

Hello, @shivam 
center the logo between menus in the Prestige theme on Shopify, you will need to modify the theme's HTML and CSS

Go to the Shopify Admin Panel:

  • Navigate to Online Store > Themes.
  • Find the Prestige theme and click on Actions > Edit Code.

Find the Header File:

  • Look for the header file, usually named header.liquid or something similar, under Sections
  • Edit the Header Structure:

 

 

<header class="site-header">
  <div class="header-wrapper">
    <div class="header-left">
      <!-- Left menu items -->
      {% for link in linklists.main-menu.links %}
        <a href="{{ link.url }}">{{ link.title }}</a>
      {% endfor %}
    </div>
    <div class="header-center">
      <!-- Logo -->
      <a href="{{ shop.url }}">
        <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}">
      </a>
    </div>
    <div class="header-right">
      <!-- Right menu items -->
      {% for link in linklists.secondary-menu.links %}
        <a href="{{ link.url }}">{{ link.title }}</a>
      {% endfor %}
    </div>
  </div>
</header>
​

 

 

Add CSS for Centering

 

 

.header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left, .header-right {
  display: flex;
  flex: 1;
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
}

.header-center img {
  max-width: 100%; /* Adjust the logo size as needed */
  height: auto;
}

 

 

Save the changes you made in the Shopify theme editor.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free