Controlling the position of the side navigation menu

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Azephine
Jr. Propeller Head
Posts: 3
Joined: Thu May 31, 2018 6:44 am
Location: Switzerland

Controlling the position of the side navigation menu

Post by Azephine »

Hi there!

I've been a MadCap user for almost 10 years and I have used this forum extensively to answer all of my issues with it. Now it's time to post my first problem.

I'm pretty sure that the issue has been covered already, but I'm lacking a bit of visibility. Here's my issue: I have built a knowledge base based on a side navigation template, which I have heavily customized, to point that the original template that I used is unrecognizable. With experience, I'm finding Flare more and more constraining regarding the customization possibilities for your output and I'm trying to break free from the original HTML5 skin as much as possible. I'm my endeavor to gain full control over my platform, I have built a custom header for my Knowledge Base that I have integrated to most of the pages in my platform, with great success. However, when I integrate it to the pages in which the side navigation menu is visible, the header does not appear on the whole screen, but only on the part of the screen which is controlled by the master page (see attachment)

My question is: has anyone ever been able to control the location of the side navigation menu (

Code: Select all

.sidenav-wrapper
) and been able to determine what we could put on around it? Since it's one of the "hidden" elements entirely controlled by the skin, I have not found a workaround for this yet.

Correct placement of header (when the sidenav menu is not displayed):
Image

Incorrect placement of header (with sidenav menu):
Image


Thank you in advance for your help
Nolwenn
Nolwenn Marjou
Senior Technical Writer
:flare: Messing with Flare for 10 Years
doloremipsum
Sr. Propeller Head
Posts: 290
Joined: Mon Aug 26, 2019 2:11 pm

Re: Controlling the position of the side navigation menu

Post by doloremipsum »

Hmm, interesting question. I can't see the images you've posted (is anyone else having this problem?) but I think I understand what you mean.

Have you inserted the new header into your master page / template page? If so, it would make sense that it only appears within the "master page" box and not outside in the "skin" box. So the side menu in the skin box would naturally appear outside of the header due to the underlying HTML structure of the page.

I'm not an expert by any means, but I can imagine two paths here:
  • Build a new side menu inside the master page box. A mini TOC would be a start if you didn't have much content, but anything more sophisticated would probably require some heavy customisation.
  • Modify the existing header from the skin more extensively using the stylesheet, which would give you a lot more flexibility than using the skin editor. But that depends on whether your desired header can be created from the HTML structure of the existing header, which might not be true.
Just spitballing here! Anyone else have any ideas?
in hoc foro dolorem ipsum amamus, consectimur, adipisci volumus.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Controlling the position of the side navigation menu

Post by Psider »

I can't see the images either.

Perhaps this thread could provide some help for your issue? The start is pretty old, but it might still be relevant.
viewtopic.php?f=9&t=28236&p=140759#p123909
Azephine
Jr. Propeller Head
Posts: 3
Joined: Thu May 31, 2018 6:44 am
Location: Switzerland

Re: Controlling the position of the side navigation menu

Post by Azephine »

Thank you both for your replies!

Indeed, I inserted the header into the master page, which explains why it displays on the right of the side navigation menu. Unfortunately, with the contraints that MadCap places on output, I don't really see another solution to insert the custom header.
A mini-toc would not work for me, my sidenav menu contains about 600 topics. So I need the robustness of the original side navigation.

I have however found a solution to make the custom header appear where I want. It's quite simple, and uses only CSS. I'll share it below, if it can help anyone trying to do the same thing as me:

- First off, the original header provided by the MadCap template needs to be removed. This is done by inserting the following CSS in the <head> of the master page:

Code: Select all

<head>
        <style>
            .title-bar-container
            {
                display: none;
            }
        </style>
    </head>
This needs to be done directly in the HTML source of the master page. It won't work if inserted in the CSS sheet. Also, it needs to be done in every single master page where the custom header should appear!

- Then the width of the side navigation menu (.sidenav-wrapper) needs to be set to a specific, set value. In my case, it's 420px.
- Give .sidenav-wrapper a "padding-top" value that will enable it to be properly visible despite the new header. It needs to be set as "padding-top"; "margin-top" will not give the proper rendering.
- Give ".sidenav-wrapper" a low z-index value, to place it underneath the new header.
- Set the width of the custom header div to "100vw". "100%" will not work because the header technically is placed in the master page, which occupies the body container, so 100% would mean the full width of the body container itself, not the full width of the screen.
- Set a negative margin to the custom header div, at the same width as ".sidenav-wrapper".
- Give the header div a high z-index, to make sure it's on top of ".sidenav-wrapper".
- Set the position of the header to "fixed".

This procedure will rearrange the elements on the output page. It's a bit of a hack, but it's the best I could come up with.

For reference here is the full CSS (".sidenav-wrapper" is the left navigation menu, provided by MadCap, ".titlebar" is my new header)

Code: Select all

.sidenav-wrapper{
   width: 420px;
   padding-top: 4em;
   background-color: transparent;
   z-index: 1;
}

.titlebar{
   width: 100vw;
   height: 80px;
   background: #ffffff;
   position: fixed;
   z-index: 100;
   margin-left: -420px;
}
Also, keep in mind that you will have to add some padding to all the elements located in the body container, otherwise they might end up underneath the custom header.

Thanks again for your help doloremipsum and psider :)
Nolwenn Marjou
Senior Technical Writer
:flare: Messing with Flare for 10 Years
jimgilliam
Propeller Head
Posts: 81
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Controlling the position of the side navigation menu

Post by jimgilliam »

I've had success using a snippet and JavaScript.
Example 1: I create a container for the menu in a snippet. Then I use JavaScript to append the sidenav-container to the snippet container. This way, you can relocate the sidenav to anywhere on the page that you want and access it with a button (e.g., show menu/hide menu).

Example 2: For TopNav (and probably sidenav but I haven't tried it yet), you can also create a button and use Flare's data attribute to show and hide the mobile version of the navigation menu (data-toggle="offCanvas").
:flare:
jimgilliam
Propeller Head
Posts: 81
Joined: Tue Jun 04, 2013 9:49 am
Location: Arkansas, U.S.A.

Re: Controlling the position of the side navigation menu

Post by jimgilliam »

Example 3: I've also used SmartMenus to create my own menu using the XML TOC I create in Flare. This is a really nice tool! If you use SmartMenus to create your Flare menu, you can position it where you'd like!
:flare:
Post Reply