Adding links (or other content) above title bar in side nav

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
WDClark
Jr. Propeller Head
Posts: 8
Joined: Fri Feb 10, 2012 12:45 pm

Adding links (or other content) above title bar in side nav

Post by WDClark »

This seems like it should be such an easy thing to do, but I'm struggling with the combination of CSS and template pages and outputs...

I'm redeveloping our top nav output into a side nav, mostly because the menus are getting too long, and we're finding that users need more context about where they are when accessing a page via direct link or CSHID. The problem I'm running into is that I want to add a few links to the top of the help output, preferably above the search field; something like this:
topMenuOptions.jpg
My CSS skills appear to be woefully inadequate to the task as the output seems to generate its own title-bar class and I'm not sure where to add what components. I found a post where you can reproduce the menu on both the side AND top nav, but I only need the top menu to be a few hard-coded links, and not the entire TOC.

Anyone got any quick tips or pointers?
You do not have the required permissions to view the files attached to this post.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding links (or other content) above title bar in side

Post by NorthEast »

Firstly, Flare doesn't provide anything that lets you do this - Flare's skin editor allows you to rearrange the existing elements in the skin header area (like logo and search box), but you can't add your own custom content or links to the header.

So to do this, you'd have to use a hack, and write some javascript that inserts content into the header area.
You could either insert content into one of the existing elements in the header (like the logo area), or create your own element in the header and use CSS flex to re-arrange Flare's elements.
So you'll need to be comfortable using a little javascript, and have reasonable CSS knowledge.

I'd suggest reading this post which discusses how to approach it:
viewtopic.php?f=6&t=30865
WDClark
Jr. Propeller Head
Posts: 8
Joined: Fri Feb 10, 2012 12:45 pm

Re: Adding links (or other content) above title bar in side

Post by WDClark »

Ah, that's exactly what I was looking for - apparently just had totally wrong search terms.

Thanks Dave.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding links (or other content) above title bar in side

Post by NorthEast »

WDClark wrote:Ah, that's exactly what I was looking for - apparently just had totally wrong search terms.
Yeah, it took me a while to find it, and I knew roughly what to look for!

Top tip - I often use a "site:" search in Google to find stuff, as it often gives better results than the forums search.
For example, I used this in Google to search the forums for "side nav header links":
site:https://forums.madcapsoftware.com/ side nav header links
AJoy
Jr. Propeller Head
Posts: 9
Joined: Mon Sep 07, 2020 3:49 am

Re: Adding links (or other content) above title bar in side

Post by AJoy »

Dave Lee wrote: use CSS flex to re-arrange Flare's elements.
I'd suggest reading this post which discusses how to approach it:
viewtopic.php?f=6&t=30865
Thanks @Dave. I could achieve what I want following your method. Thank you so much. However, the top menu is appearing squished between the logo and the search bar. How do I resolve this.
To remedy this, I tried overriding the search bar's flex-grow property to make it take the least possible space using the following code in the CSS, but with no effect. It is fine if I get the search bar removed from the header so that the menus will arrange properly. How do I do this
.nav-search-wrapper
{
flex-grow: 0;
}:
Dave Lee wrote: use CSS flex to re-arrange Flare's elements.
How do I remove the search bar from the header or move the search bar to the next line so that the menus will get arranged in the same line of Logo?

Thanks
Arun
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding links (or other content) above title bar in side

Post by NorthEast »

AJoy wrote:How do I remove the search bar from the header or move the search bar to the next line so that the menus will get arranged in the same line of Logo?
You can move the search bar to the next line just by using the skin settings. Go to Header - Search Bar and set Full row - Yes, and Order - 4 (or the highest number you can select) so it's placed after all the other header items.
AJoy
Jr. Propeller Head
Posts: 9
Joined: Mon Sep 07, 2020 3:49 am

Re: Adding links (or other content) above title bar in side

Post by AJoy »

Dave Lee wrote:
AJoy wrote:How do I remove the search bar from the header or move the search bar to the next line so that the menus will get arranged in the same line of Logo?
You can move the search bar to the next line just by using the skin settings. Go to Header - Search Bar and set Full row - Yes, and Order - 4 (or the highest number you can select) so it's placed after all the other header items.
I could move the search bar to the next line, but the menus are still appearing squished. See the screenshot attached.
In the image, Is it the highlighted area (navigation-wrapper nocontent) that is blocking the header-links id to stretch till the end? Or the "navigation-wrapper nocontent" div is meant for the hamburger menu? Any thoughts to get rid of that space and stretch out the new header to fit it in a single line?
Post Reply