How can I align my phone number and search bar with my logo in the header?

Store Design
1

Hi,

I have been trying and trying to get the positioning of our phone number and additional search bar to line up with the logo in our header but it keeps going below or above but not in line. I know it will be to do with styling ect but I just can not find where it is. Please can anyone help. it can be seen here - www.duxburyshomeandgarden.co.uk.

Thank you for any help.

2

Hello @Duxburys

Please share sections/header.liquid file code .

Thanks!

3

Header Code (there is a lot!)

{%- assign logo_width = 695 -%} {%- assign logo_max_width = section.settings.logo_max_width | times: 1 -%} {% if logo_max_width < logo_width %} {%- assign logo_width = logo_max_width -%} {% endif %} .logo__image-wrapper { max-width: {{ logo_width }}px; } /*================= If logo is above navigation ================== */ {% if section.settings.nav_below_logo %} .site-nav { {% if section.settings.show_header_lines %} border-top: 1px solid {{ settings.color_borders }}; border-bottom: 1px solid {{ settings.color_borders }}; {% endif %} margin-top: 8px; } {% unless section.settings.left_aligned_logo %} .logo__image-wrapper { margin: 0 auto; } {% endunless %} {% endif %} /*============ If logo is on the same line as navigation ============ */ {% unless section.settings.nav_below_logo or section.settings.show_header_lines == false %} .site-header .grid--full { border-bottom: 1px solid {{ settings.color_borders }}; padding-bottom: 10px; } {% endunless %} {% unless section.settings.nav_below_logo %} @media screen and (min-width: 1200px) { .site-nav { text-align: right!important; } } {% endunless %}

{% if section.settings.show_announcement or section.settings.header_search_enable %}

{% comment %}
Add social links to header
{% endcomment %}

{% comment %}

{% include 'social-links' %}
{% endcomment %}

{% if section.settings.show_announcement %}

{% elsif section.settings.header_search_enable %}
{% include 'search-bar' with 'header' %}
{% endif %}
{% endif %}

{% if shop.customer_accounts_enabled %}

    {% if customer %}
  • {{ 'layout.customer.account' | t }}
  • {{ 'layout.customer.log_out' | t | customer_logout_link }}
    • {% else %}
  • {{ 'layout.customer.log_in' | t | customer_login_link }}
  • {{ 'layout.customer.or' | t }}
  • {{ 'layout.customer.create_account' | t | customer_register_link }}
    • {% endif %}
{% endif %}

{% if section.settings.header_search_enable %}
{% if section.settings.show_announcement %}

{% include 'search-bar' with 'header' %}
{% endif %} {% endif %}
{% if section.settings.show_announcement %} {% if section.settings.announcement_link != blank %} {% endif %} {{ section.settings.header_text | escape }} {% if section.settings.announcement_link != blank %} {% endif %} {% endif %}
{% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %} {{ 'layout.navigation.menu' | t }} {% endunless %} {{ 'layout.cart.title' | t }} {{ cart.item_count }}
{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
{% if section.settings.nav_below_logo %}
{% if request.page_type == 'index' %}

{% else %}
{% endif %} {% if section.settings.logo != blank %} {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
{{ section.settings.logo | img_url: image_size | img_tag: shop.name }}

{% else %}
{{ shop.name }}

{% endif %}
{% if request.page_type == ‘index’ %}

{% else %}
{% endif %}

Call us Today on: 01772 336664
or 07725 074313 (after hours)

{% include 'search-bar' %}

{% include ‘site-nav’ with linklists[section.settings.nav_menu] %}

{% else %}
{% endif %}

{% include ‘site-nav’ with linklists[section.settings.nav_menu] %}

{% endif %}
4

follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

@media(max-width: 768px) {
	.site-header .wrapper .grid__item {
		display: flex;
    	float: none;
	}
	.site-header .wrapper .grid__item {
		.site-header__logo,
		.call {
			width: 100%;
		}
	}
	.site-header .wrapper .grid__item .site-header__logo a {
		padding-top: 0!important;
	} 
	.site-header .site-header__logo {
		width: 100%;
	}
}
5

@Duxburys

I developed some custom code for you. That is how it is gonna look like:

dantepw_1-1597639531939.png
dantepw_1-1597639531939.png1620×680 185 KB

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

Let me know if it works.

1 Like
6

Thank you so much. Its worked perfectly!

7

You’re very welcome!

Please don’t forget to press the button “Accept as solution” below my answer to help other people in the community with similar issues.

Wishing you a great day!