Skip to main content
tesposit.oracle
tesposit.oracle
Participating Frequently
March 13, 2024
Answered

Header Links in the Studio Theme Overlap the Title

  • March 13, 2024
  • 2 replies
  • 581 views

Hello,

I'm using the Studio theme with RH2022. We have Header links and depending on where you are in the project, the links either shift below the project title, or overlap it. This occurs when the window is not full screen and the header resizes.

Other than removing the links altogether, how do I prevent it from overlapping?

  • They do NOT overlap when viewing the Home Page.
  • They DO overlap when viewing a Topic Page. And that's what most people see.

     

There is only one setting that I see to define those, but they render differently depending on Home/Topic pages. Is there something I'm defining incorrectly on the Topic page which causes this?

Thanks!

  

    This topic has been closed for replies.
    Correct answer Amebr

    Aside:

    Did you know you have several icons that don't show up because the icon colour matches your background colour? In your 6th image which shows the topic title being truncated, you can see the image imposed of the TR (it's the 3 lines hamburger menu image). Similarly in your example of the home page, there is a Favourites icon that you can't see. You can hover the mouse over the correct areas and it will change to a hand, indicating the area is clickable. I just thought I'd point it out.

     

    Main topic:

    The topic page does seem to behave differently, and that would be something you need to raise with Adobe. You could try support, to see if they have a workaround. Or log a bug report for consideration for a future release.

     

    See the following page for support contact options. The email address is recommended as it goes to a dedicated Robohelp team.

    https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp

     

    You can request features and report issues here: https://tracker.adobe.com/
    Post the item number in the discussion so people can easily vote if they want the same functionality.

     

    I did poke around the css and I came up with a hack you could try, but Adobe might have a better suggestion. If you want to try it, paste the following into a custom css and add it to the User Assets section of the skin. You might need to add !important after some properties if they don't work once you generate and publish, but I can't test out which ones might be needed.

    NOTE: I don't guarantee that this won't cause weird display issues. You'll need to test thoroughly to make sure you're happy with the behaviour on all devices, browsers, screen sizes, etc.

     

    .RH-LAYOUT-HEADER-container {
    flex: row wrap;
    align-items: unset;
    }
    .RH-LAYOUT-HEADER-container > * {
    flex: 1 100%;
    }
    .RH-LAYOUT-HEADER-logo-box {
    position: unset;
    justify-content: unset;
    }
    .RH-LAYOUT-HEADERMENU-container {
    flex: 4 auto;
    }
    .search-placeholder-class {
    display: flex;
    flex: 1;
    }

    2 replies

    A
    Community Expert
    AmebrCommunity ExpertCorrect answer
    Community Expert
    March 14, 2024

    Aside:

    Did you know you have several icons that don't show up because the icon colour matches your background colour? In your 6th image which shows the topic title being truncated, you can see the image imposed of the TR (it's the 3 lines hamburger menu image). Similarly in your example of the home page, there is a Favourites icon that you can't see. You can hover the mouse over the correct areas and it will change to a hand, indicating the area is clickable. I just thought I'd point it out.

     

    Main topic:

    The topic page does seem to behave differently, and that would be something you need to raise with Adobe. You could try support, to see if they have a workaround. Or log a bug report for consideration for a future release.

     

    See the following page for support contact options. The email address is recommended as it goes to a dedicated Robohelp team.

    https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp

     

    You can request features and report issues here: https://tracker.adobe.com/
    Post the item number in the discussion so people can easily vote if they want the same functionality.

     

    I did poke around the css and I came up with a hack you could try, but Adobe might have a better suggestion. If you want to try it, paste the following into a custom css and add it to the User Assets section of the skin. You might need to add !important after some properties if they don't work once you generate and publish, but I can't test out which ones might be needed.

    NOTE: I don't guarantee that this won't cause weird display issues. You'll need to test thoroughly to make sure you're happy with the behaviour on all devices, browsers, screen sizes, etc.

     

    .RH-LAYOUT-HEADER-container {
    flex: row wrap;
    align-items: unset;
    }
    .RH-LAYOUT-HEADER-container > * {
    flex: 1 100%;
    }
    .RH-LAYOUT-HEADER-logo-box {
    position: unset;
    justify-content: unset;
    }
    .RH-LAYOUT-HEADERMENU-container {
    flex: 4 auto;
    }
    .search-placeholder-class {
    display: flex;
    flex: 1;
    }

    tesposit.oracle
    tesposit.oracleAuthor
    Participating Frequently
    March 15, 2024

    Thank you, Amebr!

    I did notice the hidden icons when I made the screen shots. I'll see if I can restore them somehow. I don't remember changing the colors of those, but who knows?

     

    And thank you for the links to report this to Adobe. I'll try and craft an email about it.

    The revised CSS looks interesting and I'll experiment as well!

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    March 14, 2024

    Maybe you can adjust the height of the header in the topic page? It's not something I've played with, but the height in your screenshots looks different, so maybe if they were the same height you wouldn't see the problem?

      tesposit.oracle
      tesposit.oracleAuthor
      Participating Frequently
      March 14, 2024

      Thanks, Amebr!

      I checked and indeed the height was slightly different on the one page, so I made them the same.
      However, the behavior of the two areas is not the same when I resize the screen.

      Here are some shots of the Title page. Note how it rearranges the text automatically as the page size decreases:

      The area gets larger and the text shifts below:

      Ultimately the title doesn't even fit, and it all bumps out of the box:

       

      Now, compare that to a Topic page:

      On that one, it just gets shorter, combines the links, and ultimately truncates the title instead of shifting it around.

       

      Is there some mystery setting I don't know about that causes this change in behavior? Or is it how the theme is designed? (I did make sure the height is the same between the two in my working copy.)

       

      Also, you're welcome to experiment with this if you'd like to see it in person. The project is public and published here: https://docs.oracle.com/en/cloud/saas/transportation/24b/otmol/index.html.

       

      Thanks,

      Tim

       

      Jeff_Coatsworth
      Community Expert
      Jeff_CoatsworthCommunity Expert
      Community Expert
      March 14, 2024

      To figure out if an effect of the project or the template, I'd suugest experimenting with the sample project using the same template first to see if it misbehaves the same way & then try the sample with a different template.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices