For normal main menu items, the cc-nav-item class is added to the a tag, for dropdown main menu items the cc-nav-item class is added to the div! This is why global styles targeting the a tag are overriding the dropdown styles.
Please can this be made consistent as this current inconsistency is very detrimental to efficient styling and causes limitations and issues as already described.
Step-by-step reproduction instructions:
Please write the steps needed to reproduce the bug.
Simply adding a normal menu item and a dropdown menu item to a menu and examining the markup reveals this issue.
Screenshots, screen recording, code snippet
Shows the cc-nav-item class applied inconsistently:
While you find some inconsistency in the way we have implemented the dropdown element, please review its construction and notice there is the dropdown icon that is included within, you might instead find a lot more consistency in the way we have built the Nav block logic.
Applying cc-nav-item to the <a> as you suggest would reveal a very differently styled element when applied to the dropdown link, leaving the dropdown icon out of the picture = inconsistency.
It is not as simple as moving around a few classes to suit particular needs, but provide consistency between all nav items that will either contain/not contain different elements.
I have already confirmed in the other thread a possible need to review the specific rules applied to the dropdown rules.
Once again, I’m sorry you feel this way. We have spent numerous hours working through the different outcomes and I believe have provided an efficient solution.
I’m more than happy to review this if a viable solution is provided.
I can understand that different elements have sub-elements, I am sympathetic to this. And I understand the desire for backwards compatibility. I am simply highlighting the difference between the non-dropdown and dropdown elements. Currently the dropdown elements are overridden by the global link styles - this is not desirable behaviour as I’m sure you can agree.
Regarding classes for styling containing elements, perhaps the cc-nav-item can be kept specifically for the actual navigation link itself and the cc-nav-dropdown__button can be used for styling the button and the icon?
I appreciate and acknowledge the hard work you have put into the Nav block, it is a massive improvement over the menu block and is extremely full-featured. I am simply providing feedback to help make it easier to style and will help in any way you need.
Yet again, another resolved issue. This can be marked as fixed.
Moving the classes to the li is ideal and exactly what we wanted, provides perfect consistency and allows styling of all inner elements with no conflicts.
@Louis and the Cwicly team, you guys are doing a fantastic job!
