NO BUG: Mega Menu and CSS Selector Bug

Browser: Arc
OS: macOS
URL: dev site

I have come across an interesting situation where I created a mega menu, and then tried to set the positioning using the CSS Selector fields (both horizontal and vertical) in the builder.

When viewing the front end, the positioning wasn’t working as expected, e.g. it wasn’t the width of the horizontal selector, and it wasn’t positioning at the bottom of the vertical selector.

I’ve worked out that if you have “Add element ID as needed” toggled ON in the Bricks Settings, it’s not forcibly outputting the IDs for those elements EVEN THOUGH I had selected them in the Mega Menu settings.

Bricks should be picking up that I have targeted a specific ID and ensure that the ID is output in the HTML code.

I was able to fix it by turning OFF the “Add element ID as needed” toggle, but not really what I wanted, as now every single element output to the DOM has an ID tacked onto it whether it needs it or not.

I suppose I could try putting some irrelevant CSS on the ID level for the elements I want to use in the Selector fields, but again, this isn’t an ideal solution.

Cheers
Jacob

Hi @jkbweb,

thanks for your report. There is another solution so that you don’t need to toggle “Add element ID as needed” off.
If you check the “Style” tab, then you go under “CSS”, and down below you will see “CSS ID”. There you can set a custom element ID, and that one will be visible even if you have that option toggled on, and you don’t need styling on it.

Hope that helps :slight_smile:

Best regards,
M

Thanks for providing this solution. I finally got around to checking it, and it’s working as expected :slight_smile:

I still don’t think it should be necessary to manually force an ID there when Bricks already has one, but I guess it’s difficult for Bricks to know if that particular element is being targeted by some other code.

Yeah, there is no reliable way to know if some ID is used or not. They can be used in various CSS styles, outside of our control, and also in JS and so on. In that case, you would need to toggle that CSS ID setting in the settings back on, to not get rid of unused IDs (Add element ID as needed)

But, as this solution works, I’ll mark this thread as no bug.

Best regards,
M