Elgg 2.x : fix topbar and top menu

Hi everybody.

Is there a way to fix top bar and top menu in Elgg ? During navigation users could easily access their notifications and main pages (files, bookmarks,...).

I would be interested in the code to put in a custom plugin. Something like this : https://elgg.org/plugins/2038049

Thank you.

  • Does this plugin fail to work on Elgg 2.X?

  • In fact, with this extension, there is a problem on the right of the topbar. We see the blue background. I ve looked in the css provided by the extension, but when i modify width from 97% to 98% or 96% the result is not perfect...

  • What if you remove the "width" line in the CSS file of the plugin completely?

  • Without width, the topbar is about 33% of the screen on the left of the screen...

    the code

    /* Magic Topbar Plugin */

    .elgg-page-topbar{
            position: fixed;
    /*      width:97%;*/
    }
    .elgg-page-header {
            padding-top: 40px;
    }

  • after another test and after refresh cache, with width 98% it's better

  • How about

    .elgg-page-topbar{
        position: fixed;
        width:100%;
    }
    .elgg-topbar-dropdown {
        padding-bottom: 8px; /* forces button to reach bottom of topbar */
        padding-right:10px;
    }
    .elgg-page-header {
        padding-top: 40px;
    }

    (elgg-topbar-dropdown class comes from the Aalborg theme and the padding-right adjustment seems necessary to move the Account menu items slightly to the left to show it completely with the topbar at 100%).

  • with your solution, it works also. Thank u.

  • Sorry.
    And what about fixing elgg menu ? Like topbar, is it easily to modify css ?
    Thank u.

  • Try

    .elgg-page-topbar {
        position: fixed;
        width:100%;
    }
    .elgg-topbar-dropdown {
        padding-bottom: 8px; /* forces button to reach bottom of topbar */
        padding-right:10px;
    }
    .elgg-page-header {
        position: fixed;
        width:100%;
        padding-top: 40px;
        height: 65px;
        z-index:1000;
    }
    .elgg-page-navbar {
        position: fixed;
        width:100%;
        padding-top: 105px;
        z-index:999;
    }
    .elgg-page-body {
        position: relative;
        padding-top: 150px;
    }

    Depending on your site's header image and/or logo you might need to adjust the height and padding-top values for the vertical alignment displayed correctly.

  • Great ! You are the best ;)

    I have used this code :

    .elgg-page-topbar{
        position: fixed;
        width:100%;
    }
    .elgg-topbar-dropdown {
        padding-bottom: 8px; /* forces button to reach bottom of topbar */
        padding-right:10px;
    }
    .elgg-page-header {
        position: fixed;
        width:100%;
        padding-top: 0px;
        height: 0px;
    }
    .elgg-page-navbar {
        position: fixed;
        width:100%;
        padding-top: 30px;
        z-index:1000;
    }
    .elgg-page-body {
        position: relative;
        padding-top: 75px;
    }

    I have also disabled header logo (elgg/vendor/elgg/elgg/views/default/page/elements/header_logo.php) :

    <?php
    /**
     * Elgg header logo
     */
    
    $site = elgg_get_site_entity();
    $site_name = $site->name;
    $site_url = elgg_get_site_url();
    ?>
    
    <!--<h1>
            <a class="elgg-heading-site" href="<?php echo $site_url; ?>">
                    <?php echo $site_name; ?>
            </a>
    </h1>-->
    
    

    The result :

    Thank U again. Gerald

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking