[Rt-commit] rt branch, 5.0/fix-main-navigation-overlap-with-custom-logo, created. rt-5.0.0-188-g512192cb0d

[Blaine Motsinger]

The branch, 5.0/fix-main-navigation-overlap-with-custom-logo has been created
        at  512192cb0daf127373b8b282fe615bd9cd9d32e8 (commit)

- Log -----------------------------------------------------------------
commit 512192cb0daf127373b8b282fe615bd9cd9d32e8
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Wed Jan 6 14:12:37 2021 -0600

    Fix main navigation overlap with custom logo
    
    The right position of topactions is statically set to allow for
    the size of the default RT logo.  When a custom logo is uploaded
    not matching the size of the default RT logo, topactions is no
    longer correctly positioned.
    
    This not only affects the layout, but the menu overflow, since
    rebalanceOverflowMenu calculates based on logo width and not the
    position of topactions.  This can cause topactions to overlap the
    right menu items.
    
    This commit sets the position of topactions based on the logo size
    to fix the layout and menu overflow if a custom logo is uploaded.

diff --git a/share/html/NoAuth/css/elevator-light/BeforeNav b/share/html/NoAuth/css/elevator-light/BeforeNav
index 39ef1fd07a..21e0e6e6b8 100644
--- a/share/html/NoAuth/css/elevator-light/BeforeNav
+++ b/share/html/NoAuth/css/elevator-light/BeforeNav
@@ -162,6 +162,11 @@ jQuery(function() {
 });
 
 jQuery('#logo img').on('load', function () {
+    // set the right position of #topactions based on the logo size to allow for custom logos.
+    // font size is calculated, to as close as possible, resemble setting in em instead of pixel.
+    var font_size = parseFloat(jQuery('body').css('font-size'));
+    jQuery('#topactions').css('right', jQuery('#logo').width() + font_size + 'px');
+
     rebalanceOverflowMenu('#app-nav', '#li-overflow');
 });
 

-----------------------------------------------------------------------