First let me tell you my problem. I have a large site and I’m using Dropdown Menus for navigation.
It’s easy to get lost while creating nested submenus so I Collapse various parts of it for clarity.
The trouble is that Pinegrow then assigns a collapse tag to each item that I need to remove with a Find/Replace function in Atom. I notice these tags appearing elsewhere as well on occasion, like with images if I recall. No big deal but it is needlessly cluttered code.
The thing I want the tag for is this. When I hover over a space-holder menu item on a web page it shows me the pgid. It would be great if I could find this id in the actual code so I know I’m editing the right menu or submenu item as it can easily get confusing as well as tiresome switching back and forth from code to page display to see if it’s right.
As you are no doubt aware, one cannot view dropdown menus directly within the view pane of Pinegrow. At least I can’t.
Hi @Farscaper I’m not entirely sure I understand you but this might help you view drop down menus directly within Pinegrow.
First add a new class to style.css called .dropdown-menu {display: inline;}
Select **Display: inline** in the CSS Tab
The result should be that the drop down menus are displayed without hovering!
This should result in the dropdown menus being displayed which might allow you to achieve what you are trying to do with a little less effort. Click Page > edit code and when you click on an item in the menu it will be highlighted in the code and in the DOM tree which should hopefully provide you with the information you need to be able to do whatever you are tiring to achieve.
Hope this solves or at least goes some way towards helping you with your issue, if not then leave some more info and we’ll do our best to find a solution.
Okay. I guess I’ll need some screen shots to explain my dilemma.
Forgetting about hovering for a minute, let’s assume I want to see the various elements of a dropdown menu within the Pinegrow WYSIWYG interface itself, not what is displayed on a generated webpage.
On my interface I can see the top level of the menu but not the underlying submenus. For that I currently need to keep refreshing the generated page. While on that page in Firefox, but not in Pinegrow, I can check all aspects of the submenus and such but I need to keep going to Firefox and refreshing, rather than somehow see the changes directly in Pinegrow.
I’ve tried the CSS changes but see no difference as of yet.
Oh wait. It finally took and now I have a sea of expanded menus to wade through. I’ll try to make some sense of it and check back in.
Edit: While I do get to see the expanded menus in Pinegrow itself, as desired, the fact that I have so many that are overlapping means that I can’t click on the ones underneath or see them when selected in the code. I’m not sure if this is much better than my old way.
