Header Layout

Solved
Highlighted
New Member
4 0 0

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. 

0 Likes
Highlighted
Shopify Partner
2315 502 652

Hello @Duxburys 

Please share sections/header.liquid file code .

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
4 0 0

Header Code (there is a lot!)

<style>
{%- 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 %}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="header-bar">
<div class="wrapper medium-down--hide">
<div class="post-large--display-table">

{% if section.settings.show_announcement or section.settings.header_search_enable %}
<div class="header-bar__left post-large--display-table-cell">

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

{% comment %}
<div class="header-bar__module header-bar__module--list">
{% include 'social-links' %}
</div>
{% endcomment %}

{% if section.settings.show_announcement %}
<div style="width:700px" class="header-bar__module header-bar__message">
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}
{{ section.settings.header_text | escape }}
{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
</div>
{% elsif section.settings.header_search_enable %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}

</div>
{% endif %}

<div class="header-bar__right post-large--display-table-cell">

{% if shop.customer_accounts_enabled %}
<ul class="header-bar__module header-bar__module--list">
{% if customer %}
<li>
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li>{{ 'layout.customer.or' | t }}</li>
<li>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
</ul>
{% endif %}

<div class="header-bar__module">
<span class="header-bar__sep" aria-hidden="true"></span>
<a href="{{ routes.cart_url }}" class="cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
</a>
</div>

<div class="header-bar__module">
<a href="{{ routes.cart_url }}" class="cart-page-link">
{{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>

{% if section.settings.header_search_enable %}
{% if section.settings.show_announcement %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}
{% endif %}
<br />

</div>
</div>
</div>

<div class="wrapper post-large--hide announcement-bar--mobile">
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}
<span>{{ section.settings.header_text | escape }}</span>
{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
{% endif %}
</div>

<div class="wrapper post-large--hide">
{% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %}
<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" aria-controls="MobileNav" aria-expanded="false">
<span class="icon icon-hamburger" aria-hidden="true"></span>
{{ 'layout.navigation.menu' | t }}
</button>
{% endunless %}
<a href="{{ routes.cart_url }}" class="cart-page-link mobile-cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>

</div>
{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
</div>

<header class="site-header" role="banner">

<div class="wrapper" style="padding-top:0px;">
{% if section.settings.nav_below_logo %}
<div class="grid--full">
<div class="grid__item">
{% if request.page_type == 'index' %}
<h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo != blank %}
<noscript>
{% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
<div class="logo__image-wrapper">
{{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
</div>

</noscript>
<div class="logo__image-wrapper supports-js">
<a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
{% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="logo__image lazyload"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ shop.name | escape }}"
itemprop="logo">
</a>
</div>

{% else %}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}

{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}

</h1>

<div align="right">
<p>Call us Today on: <b>01772 336664</b> <br />
or <b>07725 074313</b> (after hours)</p>
{% include 'search-bar' %}
</div>

</div>



</div>
</div>

<div class="grid--full medium-down--hide">

<div class="grid__item">

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

</div>
</div>
{% else %}
<div class="grid--full post-large--display-table">

<div class="grid__item post-large--one-third post-large--display-table-cell">

{% if request.page_type == 'index' %}
<h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo != blank %}
<noscript>
{% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
<div class="logo__image-wrapper">

{{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
</div>
</noscript>
<div class="logo__image-wrapper supports-js">


<a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
{% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="logo__image lazyload"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ shop.name | escape }}"
itemprop="logo">
</a>
</div>
{% else %}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

<div class="grid__item post-large--two-thirds post-large--display-table-cell medium-down--hide">

{% include 'site-nav' with linklists[section.settings.nav_menu] %}
</div>

</div>
{% endif %}
</div>

<div id="qab_placeholder"></div>

</header>

 

 

0 Likes
Highlighted
Explorer
119 19 28

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%;
	}
}
My life is sharing.
I hope my solution can help you save at least 1$
Build Page faster with PageBuilder App.
shopify.expert.team@gmail.com
0 Likes
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

 

@Duxburys 

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

dantepw_1-1597639531939.png

 



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

<style>

@media (min-width: 767px){
    .site-header .wrapper .grid--full .grid__item:first-of-type{
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.site-header .wrapper .grid--full .grid__item:first-of-type > *{
  max-width: 50% !important;
  width: 100% !important;
}

.site-header .wrapper .grid--full .grid__item:first-of-type form{
    max-width: 400px !important;
    width: 100% !important;
}
}

@media (max-width:767px){
    .site-header__logo .logo__image-wrapper {
    text-align: center;
    margin: 0 auto;
    display: block;
    width: 100%;
}


</style>


Let me know if it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
New Member
4 0 0

Thank you so much. Its worked perfectly!

0 Likes
Highlighted
Astronaut
1085 178 213

This is an accepted solution.

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!

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes