Forum Discussion

Paul Bullock's avatar
Paul Bullock
Brass Contributor
Jun 18, 2019

Hub Sites and Visual Issues

I'm having Styling issues in Target Release and Standard Release tenants at the moment, for Hub sites and MegaNav, this is a OOB site, not hacks or SPFX App Customisers.

The visual issues include:

  • Overlapping Text in MegaNav - the overlapping is worse with multi-lingual sites where translated words are longer. 
  • Text leaving the MegaNav space
  • Primary Hub Site - Nav bar text not aligned, its fine navigating to a child hub site.

 

  • Paul Bullock I have struggled with the same issue. For now, I would recommend:

    1. Only use the megamenu if you have 3 levels in your menu. If you only need 2 levels, as you are showing, you can achieve what you want by using the simpler Cascading menu. You are not required to use a megamenu - if you only have two levels of links, it is not the best option. 
    2. I know this is silly, but use shorter heading labels. Use Headers for Level 2 (not URLs). You will get slightly more real-estate for labels in Level 3, where you can put your URLs if you are using the megamenu.
    3. To make it easier for users to understand what is a Header and what is a URL, use ALL CAPS for your Header links at Level 2.
    • Paul Bullock's avatar
      Paul Bullock
      Brass Contributor

      Hi Susan_Hanley 

       

      Thank you for your response, the screenshot is a mock from a client who didn't want to share their portal.  There is a level 3 - I didn't include that in my own tenant in the screenshot (because I forgot to include them 🤦‍♂️). I could make the titles shorter, had considered it, but the sites I am building are bi-lingual and the translated words are much longer than English 😒

       

      I will try you other suggestions.

       

      Thanks

      Paul

  • Unnie's avatar
    Unnie
    Iron Contributor
    I have similar issue in my developer tenant. Wonder if there is any easy way out from this

Resources