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:
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?
Adding links (or other content) above title bar in side nav
Adding links (or other content) above title bar in side nav
You do not have the required permissions to view the files attached to this post.
Re: Adding links (or other content) above title bar in side
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
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
Re: Adding links (or other content) above title bar in side
Ah, that's exactly what I was looking for - apparently just had totally wrong search terms.
Thanks Dave.
Thanks Dave.
Re: Adding links (or other content) above title bar in side
Yeah, it took me a while to find it, and I knew roughly what to look for!WDClark wrote:Ah, that's exactly what I was looking for - apparently just had totally wrong search terms.
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
Re: Adding links (or other content) above title bar in side
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.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
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;
}:
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?Dave Lee wrote: use CSS flex to re-arrange Flare's elements.
Thanks
Arun
Re: Adding links (or other content) above title bar in side
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 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?
Re: Adding links (or other content) above title bar in side
I could move the search bar to the next line, but the menus are still appearing squished. See the screenshot attached.Dave Lee wrote: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 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?
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?