Sticky/Fixed Header and Navigation for Simple Theme

Highlighted
New Member
6 0 0

Hello, just started my online shop, NavomsBeauty

Does anyone know how to get the header, with logo, cart, sign in, top menu links etc. to be fixed with the Simple theme? I really like this theme but would like a fixed sticky header as well so that when customers scroll down, they can still see the cart and search field above. 

Thanks,

Neelam

0 Likes
Highlighted

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.top-bar.grid {
    position: fixed;
    z-index: 999;
    background-color: gray;
    width: 80%;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
6 0 0

Thanks. This looks very ugly. It also extends the cart more to the right. When I scroll the page down, I can see my page moving behind the bar which is very annoying and defeats the whole purpose.

 

I want to freeze the existing headers as-is, same color and width (no changes) and when I scroll the page down, it should feel like this website

https://simplyleafy.com/

 

 

0 Likes
Highlighted

@navoms.

For this you have to modify header.liquid file

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Hey Navoms!

You gotta head to your "Themes" > Edit Code > "Sections" File

 

Look for the 

<style>
  .site-header__logo img {
    max-width: {{ section.settings.logo_width | escape | default: '180' | remove: 'px' | append: 'px' }};
  }
  @media screen and (max-width: 749px) {
    .site-header__logo img {
      max-width: 100%;
    }
  }
</style>

Add this

header {
    position: fixed;
  }

In between the

<style>

 

</style>

 

Lemme know if it helps!

Working on...
1. Product Lens (App that helps the middle of the funnel marketing)
2. Strategy + Tactics: Marketing Blog
3. Want store feedback? Try this free tool (You gotta give to receive)
4. 60-day SEO email course
5. FB Marketing 102 email newsletter
0 Likes
Highlighted
New Member
6 0 0

No this didn't help. This actually fixed the top logo only but not the header.

 

<style>
I ADDED YOUR CODE HERE
.site-header__logo {
width: {{ logo_max_width | escape | default: '150' | remove: 'px' | append: 'px'}};
}
#HeaderLogoWrapper {
max-width: {{ logo_max_width | escape | default: '150' | remove: 'px' | append: 'px'}} !important;
}

</style>

0 Likes
Highlighted
New Member
6 0 0

And how do I do that? Any tips. Thanks again.

0 Likes

Thats weird.. it should either not work at all or it should work.. Could you copy and paste that entire file here?

I want to see what might be blocking it

Working on...
1. Product Lens (App that helps the middle of the funnel marketing)
2. Strategy + Tactics: Marketing Blog
3. Want store feedback? Try this free tool (You gotta give to receive)
4. 60-day SEO email course
5. FB Marketing 102 email newsletter
0 Likes
Highlighted
New Member
6 0 0

{%- unless section.settings.logo == blank -%}
{%- assign logo_max_height = section.settings.logo_max_width | divided_by: section.settings.logo.aspect_ratio -%}
{% if logo_max_height > 600 %}
{%- assign logo_max_width = 600 | times: section.settings.logo.aspect_ratio -%}
{% else %}
{%- assign logo_max_width = section.settings.logo_max_width -%}
{% endif %}

<style>

.site-header__logo {
width: {{ logo_max_width | escape | default: '150' | remove: 'px' | append: 'px'}};
}
#HeaderLogoWrapper {
max-width: {{ logo_max_width | escape | default: '150' | remove: 'px' | append: 'px'}} !important;
}

</style>
{%- endunless -%}

{% if section.settings.show_announcement and section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar--link:hover {
{% assign brightness = settings.color_primary_color | color_brightness %}

{% if brightness <= 224 %}
background-color: {{ settings.color_primary_color | color_lighten: 4 }};
{% else %}
background-color: {{ settings.color_primary_color | color_darken: 8 }};
{% endif %}
}
</style>

{% if section.settings.announcement_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.announcement_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message site-wrapper">{{ section.settings.announcement_text | escape }}</p>

{% if section.settings.announcement_link == blank %}
</div>
{% else %}
</a>
{% endif %}
{% else %}
<div class="page-border"></div>
{% endif %}

<div class="site-wrapper">
<div class="top-bar grid">

<div class="grid__item medium-up--one-fifth small--one-half">
<div class="top-bar__search">
<a href="{{ routes.search_url }}" class="medium-up--hide">
{% include 'icon-search' %}
</a>
<form action="{{ routes.search_url }}" method="get" class="search-bar small--hide" role="search">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
<button type="submit" class="search-bar__submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
<input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
</form>
</div>
</div>

{% if shop.customer_accounts_enabled %}
<div class="grid__item medium-up--two-fifths small--hide">
<span class="customer-links small--hide">
{% if customer %}
{% if customer.first_name != blank %}
{% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
{% else %}
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
{% endif %}
<span class="vertical-divider"></span>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.log_in' | t | customer_login_link }}
<span class="vertical-divider"></span>
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
</span>
</div>
{% endif %}

<div class="grid__item {% if shop.customer_accounts_enabled %} medium-up--two-fifths {% else %} medium-up--four-fifths {% endif %} small--one-half text-right">
<a href="{{ routes.cart_url }}" class="site-header__cart">
{% include 'icon-cart' %}
<span class="small--hide">
{{ 'layout.cart.title' | t }}
(<span id="CartCount">{{ cart.item_count }}</span>)
</span>
</a>
</div>
</div>

<hr class="small--hide hr--border">

<header class="site-header grid medium-up--grid--table" role="banner">
<div class="grid__item small--text-center">
<div itemscope itemtype="http://schema.org/Organization">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name uses `h1` tag on homepage, div on other pages.
{% endcomment %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if section.settings.logo %}
<div id="HeaderLogoWrapper" class="supports-js">
<a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%; display: block;">
<img id="HeaderLogo"
class="lazyload"
src="{{ section.settings.logo | img_url: '150x150' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
</a>
</div>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<a href="{{ routes.root_url }}" itemprop="url">
<img class="site-header__logo" src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
</a>
</noscript>
{% if request.page_type == 'index' %}
<h1 class="visually-hidden">{{ shop.name }}</h1>
{% endif %}
{% else %}
{% if request.page_type == 'index' %}
<h1 class="site-header__site-name">
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
</h1>
{% else %}
<a href="{{ routes.root_url }}" class="site-header__site-name h1" itemprop="url">
{{ shop.name }}
</a>
{% if request.page_type == 'index' %}
<h1 class="visually-hidden">{{ shop.name }}</h1>
{% endif %}
{% endif %}
{% endif %}
</div>
</div>
{% unless section.settings.tagline == blank %}
<div class="grid__item medium-up--text-right small--text-center">
<div class="rte tagline">
{{ section.settings.tagline }}
</div>
</div>
{% endunless %}
</header>
</div>

 

{% schema %}
{
"name": {
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"hi": "हैडर",
"it": "Header",
"ja": "ヘッダー",
"ko": "머리글",
"ms": "Pengepala",
"nb": "Header",
"nl": "Koptekst",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "header",
"content": {
"da": "Logo",
"de": "Logo",
"en": "Logo",
"es": "Logotipo",
"fi": "Logo",
"fr": "Logo",
"hi": "लोगो",
"it": "Logo",
"ja": "ロゴ",
"ko": "로고",
"ms": "Logo",
"nb": "Logo",
"nl": "Logo",
"pt-BR": "Logotipo",
"pt-PT": "Logótipo",
"sv": "Logotyp",
"th": "โลโก้",
"zh-CN": "logo",
"zh-TW": "商標"
}
},
{
"type": "image_picker",
"id": "logo",
"label": {
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Imagen del logotipo",
"fi": "Logokuva",
"fr": "Image du logo",
"hi": "लोगो इमेज",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"ms": "Imej logo",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "text",
"id": "logo_max_width",
"label": {
"da": "Brugerdefineret logobredde (i pixels)",
"de": "Benutzerdefinierte Logobreite (Pixel)",
"en": "Custom logo width (in pixels)",
"es": "Ancho del logotipo personalizado (en píxeles)",
"fi": "Mukautettu logon leveys (pikseleinä)",
"fr": "Largeur personnalisée du logo (en pixels)",
"hi": "कस्टम लोगो की चौड़ाई (पिक्सेल)",
"it": "Larghezza logo personalizzato (in pixel)",
"ja": "ロゴの幅をカスタムする(ピクセルで)",
"ko": "사용자 지정 로고 폭 (픽셀)",
"ms": "Lebar logo tersuai (dalam piksel)",
"nb": "Tilpasset logobredde (i piksler)",
"nl": "Aangepaste logobreedte (in pixels)",
"pt-BR": "Largura do logotipo personalizado (em pixels)",
"pt-PT": "Largura de logótipo personalizada (em píxeis)",
"sv": "Anpassad logotypbredd (i pixlar)",
"th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
"zh-CN": "自定义 logo 宽度(像素)",
"zh-TW": "自訂標誌寬度 (單位為像素)"
},
"default": {
"da": "150",
"de": "150",
"en": "150",
"es": "150",
"fi": "150",
"fr": "150",
"hi": "150",
"it": "150",
"ja": "150",
"ko": "150",
"ms": "150",
"nb": "150",
"nl": "150",
"pt-BR": "150",
"pt-PT": "150",
"sv": "150",
"th": "150",
"zh-CN": "150",
"zh-TW": "150"
}
},
{
"type": "header",
"content": {
"da": "Meddelelseslinje",
"de": "Ankündigungsleiste",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fi": "Ilmoituspalkki",
"fr": "Barre d'annonces",
"hi": "घोषणा बार",
"it": "Barra degli annunci",
"ja": "告知バー",
"ko": "공지 표시줄",
"ms": "Bar pengumuman",
"nb": "Kunngjøringslinje",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de anúncio",
"pt-PT": "Barra de comunicado",
"sv": "Meddelandefält",
"th": "แถบประกาศ",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "show_announcement",
"label": {
"da": "Vis meddelelse",
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fi": "Näytä ilmoitus",
"fr": "Afficher l'annonce",
"hi": "घोषणा डिखाएं",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"ko": "공지 표시",
"ms": "Tunjukkan pengumuman",
"nb": "Vis kunngjøring",
"nl": "Aankondiging weergeven",
"pt-BR": "Exibir anúncio",
"pt-PT": "Mostrar comunicado",
"sv": "Visa tillkännagivande",
"th": "แสดงประกาศ",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"da": "Kun startside",
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fi": "Vain kotisivu",
"fr": "Page d'accueil uniquement",
"hi": "केवल होमपेज",
"it": "Solo home page",
"ja": "ホームページのみ",
"ko": "홈페이지만",
"ms": "Halaman utama sahaja",
"nb": "Kun på startsiden",
"nl": "Alleen startpagina",
"pt-BR": "Apenas na página inicial",
"pt-PT": "Apenas a página inicial",
"sv": "Endast hemsida",
"th": "หน้าแรกเท่านั้น",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "announcement_text",
"label": {
"da": "Meddelelsestekst",
"de": "Ankündigungstext",
"en": "Announcement text",
"es": "Texto del anuncio",
"fi": "Ilmoitusteksti",
"fr": "Texte d'annonce",
"hi": "घोषणा पाठ",
"it": "Testo annuncio",
"ja": "告知テキスト",
"ko": "공지 텍스트",
"ms": "Teks pengumuman",
"nb": "Kunngjøringstekst",
"nl": "Aankondigingstekst",
"pt-BR": "Texto do anúncio",
"pt-PT": "Texto do comunicado",
"sv": "Meddelandetext",
"th": "ข้อความประกาศ",
"zh-CN": "公告文本",
"zh-TW": "公告文字"
},
"default": {
"da": "Meddel noget her",
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fi": "Ilmoita jotakin tässä",
"fr": "Annoncez quelque chose ici",
"hi": "यहां कुछ घोषित करें",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"ko": "여기에 공지하십시오",
"ms": "Mengumumkan sesuatu di sini",
"nb": "Kunngjør noe her",
"nl": "Kondig hier iets aan",
"pt-BR": "Anuncie algo aqui",
"pt-PT": "Anunciar algo aqui",
"sv": "Meddela något här",
"th": "ประกาศข้อความที่นี่",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "announcement_link",
"label": {
"da": "Link til meddelelse",
"de": "Ankündigungslink",
"en": "Announcement link",
"es": "Enlace de anuncio",
"fi": "Ilmoituslinkki",
"fr": "Lien d'annonce",
"hi": "घोषणा लिंक",
"it": "Link annuncio",
"ja": "告知リンク",
"ko": "공지 링크",
"ms": "Pautan pengumuman",
"nb": "Kunngjøringskobling",
"nl": "Aankondigingslink",
"pt-BR": "Link de anúncio",
"pt-PT": "Ligação do comunicado",
"sv": "Meddelandelänk",
"th": "ลิงก์ประกาศ",
"zh-CN": "公告链接",
"zh-TW": "公告連結"
},
"info": {
"da": "Valgfri",
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fi": "Valinnainen",
"fr": "Facultatif",
"hi": "वैकल्पिक",
"it": "Facoltativo",
"ja": "オプション",
"ko": "선택 사항",
"ms": "Opsyenal",
"nb": "Valgfritt",
"nl": "Optioneel",
"pt-BR": "Opcional",
"pt-PT": "Opcional",
"sv": "Valfritt",
"th": "ไม่จำเป็น",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
},
{
"type": "header",
"content": {
"da": "Slogan",
"de": "Tagline",
"en": "Tagline",
"es": "Eslogan",
"fi": "Iskulause",
"fr": "Slogan",
"hi": "टैगलाइन",
"it": "Tagline",
"ja": "タグライン",
"ko": "태그 라인",
"ms": "Tagline",
"nb": "Slagord",
"nl": "Tagline",
"pt-BR": "Tagline",
"pt-PT": "slogan",
"sv": "Tagline",
"th": "สโลแกน",
"zh-CN": "标语",
"zh-TW": "標語"
}
},
{
"type": "richtext",
"id": "tagline",
"label": {
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"hi": "टेक्स्ट",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"ms": "Teks",
"nb": "Tekst",
"nl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"zh-CN": "文本",
"zh-TW": "文字"
}
}
]
}
{% endschema %}

0 Likes