how can I just show the hamburger button

[moegal]

When I have a device that is small enough to  show the hamburger part, how can I only show the hamburger button.  I want to put some text to the left of the button where is now only dead space.

Marty

[Magdalena]

Hello,

The hamburger button is displayed automatically on mobile device or if the screen is narrower than 720 pixels. If you would like to move all items to the "hamburger" button, you can also make it by the internal method moveAllNodesInMenuButton(). A custom text which is not an item can be added for this moment by an additional custom JavaScript.

Regards,
Magdalena
Telerik

 

 

[moegal]

i have tried several combinations of moveAllNodesInMenuButton I cannot get RadNavigation to do anything differently.

 Also, not sure what you mean by custom javascript for adding text.  Do you mean doing something like jquery before or append and just add it myself?

[Magdalena]

Hi,

The solution $find("RadNavigation1").moveAllNodesInMenuButton() will hide all nodes so only hamburger button will be visible. If you do not want to display gradient background that expand to the entire width, you can use RadMenu control in the Mobile or Auto render mode.

Regarding to adding the text, I mean to add it by an additional JavaScript and yes - the "append()" method by jQuery is one of the possible approaches.

Regards,
Magdalena
Telerik

 

 

[moegal]

That makes sense. I was looking for a server side setting. 

Is there a server property I can set?

Also, is there a onResize event I can watch on the client side?

Thanks, Marty

 

I am using the following at the moment in testing:

function pageLoad() {
           $(".rnvRootGroupWrapper").resize(function (e) {
               if ($(".rnvRootGroup ").children().length == 0) {
                   if ($(".cool").length == 0) {
                       $(".rnvRootGroupWrapper").append('<div class="cool">Test</div>');
                   }
               } else {
                   $(".cool").remove();
               }
           });
       }

I have had to add a jquery resize plugin that I would rather not have to load as well.

[Magdalena]

Hello Marty,

Hiding root items in the sandwich is implemented only on client side so it cannot be achieved on server side. There is no client side event for re-sizing (you can find all client side event of the RadNavigation in our online documentation) so it is necessary to use your custom logic.

Regards,
Magdalena
Telerik

 

 

[moegal]

here is what I ended up with to add icons and/or text to the empty space beside the hamburger button. It is dependent on jquery and  jquery.resize.js

Marty

function pageLoad() {
    $ = $telerik.$;
    function updateMenu() {
        $(".navCTitle").remove();
        if ($(".rnvRootGroup ").children().length == 0) {
            if ($(".navCTitle").length == 0) {
                var str = '';
                str += '<div class="navCTitle">';
                str += '<a href="/"><span class="fa fa-home fa-2x"></span></a>';
                str += '<a href="/contact"><span class="fa fa-envelope-o fa-2x"></span></a>';
                str += '</div>';
                $(".rnvRootGroupWrapper").append(str);
            }
        }
    }
    $(".rnvRootGroupWrapper").resize(function (e) {
        setTimeout(updateMenu, 100);
    });
    if (typeof contentPageLoad == 'function')
        contentPageLoad();
};

 

[Magdalena]

Hi Marty,

We are glad that you were able to achieve the expected behavior. Thank you for sharing the solution with the community.

Regards,
Magdalena
Telerik