Debutify verson 6.2.1, Problems with my sticky header code

Hello all,

i wrote this code for my sticky header:

.header.header--center { position: fixed !important; top: 0 !important; width: 100% !important; z-index: 1000 !important; transition: background-color 0.3s, color 0.3s; /* Übergangseffekt */ } .header.header--center.scrolled { background-color: white !important; /* Weißer Hintergrund bei Scroll */ color: black !important; /* Schwarzer Text bei Scroll */ } .header.header--center a { transition: color 0.3s; /* Übergangseffekt für Links */ } .header.header--center.scrolled a { color: black !important; /* Schwarzer Linktext bei Scroll */ }

and it works im happy but there is one thing that bothers me on everyother page of my website it doesnt show the title of the page…

for example in our shop it shows only the lower parts of the word shop…

Shop – Mein Grinder (mein-grinder.com)

where do i hav to change the code so that it works…

greets!

i think i know what i need its a padding top but it doesnt work…

that is the whole liquid.theme code:

{%- unless settings.heading_font.system? -%}

{%- endunless -%}

{%- unless settings.text_font.system? -%}

{%- endunless -%}

{%- unless settings.accent_font.system? -%}

{%- endunless -%}

{%- liquid
assign favicon_url = settings.favicon | image_url: width: 96, crop: ‘center’
assign apple_favicon_url = settings.favicon | image_url: width: 180, crop: ‘center’

if settings.favicon == blank
assign favicon_url = ‘data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=’
assign apple_favicon_url = ‘data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=’
endif
-%}

{{ page_title }}{% if current_tags %}{%- assign meta_tags = current_tags | join: ", " -%} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{%- if page_description -%}

{%- endif -%}

{%- render ‘social-meta-tags’ -%}

{%- render ‘microdata-schema’ -%}

{%- render ‘css-variables’ -%}
{%- render ‘js-variables’ -%}

{{- ‘theme.css’ | asset_url | stylesheet_tag: preload: true -}}

{%- if request.page_type contains ‘customers/’ -%}

{%- endif -%}

{{ content_for_header }}

{%- if request.page_type != 'password' -%} {%- sections 'general-group' -%} {%- sections 'addons-group' -%} {%- sections 'header-group' -%} {%- endif -%}

{%- liquid
if settings.cart_type == ‘drawer’
render ‘drawer-cart’
elsif settings.cart_type == ‘modal’
render ‘modal-cart’
endif

render ‘theme-addons’
-%}

{{ content_for_layout }}

{%- if request.page_type != ‘password’ -%}

{%- sections 'footer-group' -%}
{%- endif -%}

{%- render ‘integrations-gtm’ -%}

{%- render ‘integrations-klaviyo’ -%}

{%- render ‘custom-code’ -%}

.header.header--center { position: fixed !important; top: 0 !important; width: 100% !important; z-index: 1000 !important; transition: background-color 0.3s, color 0.3s; /* Übergangseffekt */ }

.header.header–center.scrolled {
background-color: white !important; /* Weißer Hintergrund bei Scroll /
color: black !important; /
Schwarzer Text bei Scroll */
}

.header.header–center a {
transition: color 0.3s; /* Übergangseffekt für Links */
}

.header.header–center.scrolled a {
color: black !important; /* Schwarzer Linktext bei Scroll */
}

but i dont know, padding top sould be beneath the style tag, right? but it doesnt work…

does someone know how to fix this issue?

Greets!

i think i know what i need its a padding top but it doesnt work…

but i dont know, padding top sould be beneath the style tag, right? but it doesnt work…

does someone know how to fix this issue?

Greets!

I think it would be more appropriate to use sticky. There is no need to change the style of other elements.

.shopify-section-group-header-group{position:sticky;top:0;}

where do i have to put it in the code?