Hello Paul,
thanks again for your swift reply.
I can confirm that the navigation elements are contained in that “timeline.liquid” file. I even managed to move the navigation bar to the top as I was aiming for by simply re-arranging the coding-part relating to the navigation area upwards in the code.
Now the mobile version looks perfect. However, in the desktop version, the labels are overlapping into (behind) the picture from the timeline.
The code - after my re-arrangement - looks like the following: Do you have any idea, how I could fix the desktop display? On the mobile version it looks as it should (simply moved the navigation bar to top). On desktop it is at the top, however, overlaps into the picture from my timeline, refer to attachment.
{%- if section.blocks.size > 0 -%}
{%- assign color_scheme_hash = section.settings.color_scheme.settings.background_gradient | default: section.settings.color_scheme.settings.background | md5 -%}
{%- assign carousel_id = 'carousel-' | append: section.id -%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.timeline.name",
"class": "shopify-section--timeline",
"tag": "section",
"disabled_on": {
"groups": ["header", "custom.overlay"]
},
"max_blocks": 10,
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:global.colors.scheme",
"default": "scheme-1"
},
{
"type": "color_scheme",
"id": "item_color_scheme",
"label": "t:sections.timeline.item_color_scheme",
"default": "scheme-2"
},
{
"type": "checkbox",
"id": "separate_section_with_border",
"label": "t:global.section.separate_section_with_border",
"default": true
}
],
"blocks": [
{
"type": "item",
"name": "t:sections.timeline.blocks.item.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:global.image.image",
"info": "t:sections.timeline.blocks.item.image_info"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "t:global.image.mobile_image",
"info": "t:sections.timeline.blocks.item.mobile_image_info"
},
{
"type": "inline_richtext",
"id": "label",
"label": "t:sections.timeline.blocks.item.label",
"default": "2020"
},
{
"type": "inline_richtext",
"id": "subheading",
"label": "t:global.text.subheading",
"default": "Subheading"
},
{
"type": "inline_richtext",
"id": "title",
"label": "t:global.text.heading",
"default": "Heading"
},
{
"type": "richtext",
"id": "content",
"label": "t:global.text.content",
"default": "
Use this text to share information about what happened to your brand at a specific time.
"
},
{
"type": "text",
"id": "link_text",
"label": "t:global.text.button_text"
},
{
"type": "url",
"id": "link_url",
"label": "t:global.text.button_link"
},
{
"type": "select",
"id": "link_style",
"label": "t:global.text.link_style",
"options": [
{
"value": "outline",
"label": "t:global.text.link_style_options.outline"
},
{
"value": "solid",
"label": "t:global.text.link_style_options.solid"
},
{
"value": "link",
"label": "t:global.text.link_style_options.link"
}
],
"default": "link"
},
{
"type": "header",
"content": "t:global.colors.category"
},
{
"type": "color",
"id": "mobile_text_color",
"label": "t:sections.timeline.blocks.item.mobile_text_color",
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": "t:sections.timeline.presets.timeline.name",
"blocks": [
{
"type": "item",
"settings": {
"label": "2000",
"title": "2000"
}
},
{
"type": "item",
"settings": {
"label": "2010",
"title": "2010"
}
},
{
"type": "item",
"settings": {
"label": "2020",
"title": "2020"
}
}
]
}
]
}
{% endschema %}
