There's a couple of things you could do here.
I have been playing around with skin modifications for a while now, after seeing some cool examples from Flare experts i've had working on my project, it spurred me to mess around more myself. A while back, I had some icons in my top nav menu which have long since vanished from my live site, because marketing did not approve, but I figured the same functionality could be used here. My icons were based on background images being added to the top nav selectors, but ideally you would want to avoid images if possible. That's what the "content" attribute is used for in CSS.
The way you've done it is OK, and could be improved slightly by simply copying the exact selector of the | dummy topic in the top nav, and setting pointer events to none with CSS. That would mean, they wouldn't be clickable and the pointer icon would not change when the item is hovered over.
For example, with a default Flare project, I could stop the Getting Started top nav item from being clickable by using the following code.
Code: Select all
ul.navigation li.has-children:nth-child(1)
{
pointer-events: none;
}
In the default project, Getting Started, is the first item in the top nav. Hence Nth-child(1). This functionality can be used to target anything in that hierarchy pretty much. It is extremely powerful. There's also loads of other stuff that can be done, but that's beyond the scope of your question.
Arguably, that's pretty easy and entirely maintainable with the skin editor, the dummy topics and those couple of lines of code.
We can go one further however, and get around using dummy topics entirely by expanding on what I just did above.
Code: Select all
ul.navigation li.has-children:nth-child(1):before
{
content:"\007C" !important;
color: red;
position: absolute;
top: 31%;
left: 98%;
font-size: 35px;
}
What we are saying here, is add content which is the pipe character, color it red and position it absolutely. Top and left values then put it to the right of the link. But essentially, it can go anywhere. Font size then sets the size of the pipe to be 35px.
The reason I am using :before and not :after, is that Madcap already use the :after for the little triangular carat thing that is below the link, and above the sub menu. I tried making it work with :after but couldn't. But admittedly, I haven't spent that much time and maybe there is a way without conflicting with their code. I don't think :before is used for anything on those top nav items anyway, so it works fine just the same, even though in the markup - the code is technically before the item. But visually it does not matter because the absolute positioning puts the pipe where you want it anyway. You will also need to play around with the CSS values to get it working for your site, as I literally just threw some random numbers together there to make this example. You'll likely also need to increase padding/margin for your specific top nav items as the spacing is not even when you add the pipe.
I wouldn't call this best practice. In fact, i'd call it web development hackery... but it works.
Hope that gives you a solution to start with?
