How to add a menu to the AppBar?

[Jack]

I am trying to replace a Bootstrap navbar with a Kendo UI appbar and I am facing two issues:

1) The embedded menu pops up within the appbar as in https://dojo.telerik.com/oPEbOmIX. How to fix this?

2) The appbar wraps controls on a second line when resizing.Is this the only behaviour? What is your suggestion for a more responsive approach?

[Tsvetomir]

Hi Jacques,

Thank you for the provided code snippets. Indeed, the z-index of the menu is strong enough to be visible at the top-most level of the page. However, the AppBar widget has its overflow rule set to "hidden", therefore any elements that overflow will be cut regardless of the z-index. What I can recommend is that you modify the overflow as follows:

  <style>
    #appbar{
      overflow: initial;
    }
  </style>

As per the responsiveness, the AppBar actually renders any HTML inside its element. Therefore, it cannot predict when and how to redesign its content to make it more compact. This actually has to be implemented by the developer according to the HTML that is inside the widget.

 

Best regards,
Tsvetomir
Progress Telerik

[guntur]

when I'm making the navbar for my site, I do have same issues, to fix is at styling overflow and z-index

[Tsvetomir]

Hi guntur,

Thank you for sharing what has worked out in your case. Indeed, the z-index is supposed to be large enough already. What was causing the issue is that the overflow was not allowing the elements to be shown regardless of the z-index. 

 

Best regards,
Tsvetomir
Progress Telerik