Trying to add ID selector to a div from .yaml

Support Gantry
1

Hey!

I am using Gantry5 with atom headroom.js and particle “one page menu”. And i am trying to have different “one page menus” on different modular pages.

Here I want to grab ID from headroom.yaml:

 cssselector:
  type: input.text
  description: Enter the CSS Selector for the element that should get fixed/sticky, for example '#g-header'.
  label: CSS Selector
  placeholder: '#g-header'

and the type input to onepage-menu.html.twig:

<div id="--->{{ What to write? }}<---" class="g-onepage-menu{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>

I have tried {{ particle.cssselector }}}

Sources: https://www.inspiretheme.com/documentation/gantry5-particles/onepage-menu
https://www.inspiretheme.com/documentation/gantry5-particles/headroom-js

Thanks for all replies :slight_smile:

2

I found a workaround for this. It is not optimal, but it works for now :slight_smile:

In the onepage_menu.yaml i added a new configuration

   headroom.id:
  type: input.text
  label: ID headroom
  description: Add ID so headroom can bind to the selector.
  default:

and added {{ particle.headroom.id }} to:

<div id="{{ particle.headroom.id }}" class="g-onepage-menu{% if particle.css.class %} {{ particle.css.class|e }}{% endif %}" {% if particle.extra %}{{ attr_extra|raw }}{% endif %}>

Now instead of only adding ID to headroom.js config I also need to add the same ID to one page menu particle.
This is not optimal, but it works.

Wish to learn how I can access configurations from other particles and atoms to add in a theme.

Thanks for all help :slight_smile: