Navbar horizontal collapsed - labels?

asked 2019-03-01 21:18:48 +0800

tisaksen gravatar image tisaksen
46 6

Is it possible to get labels when using a horizontal navbar with collapsed=true? Seems like I can only use icons ...

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2019-03-05 18:55:55 +0800

MDuchemin gravatar image MDuchemin
2490 1 6
ZK Team

Hi Tisaksen,

In collapsed mode, the navbar will render the labels with display:none Also, the labels will appear as the first item of the popup menu when mouse is over the item.

It's possible to change the display style of the label node, but it will "jump" to inside the popup when the popup opens. http://zkfiddle.org/sample/cmu1h9/1-navbar-collapsed-label not very optimal

better solution is to override the domContent for zkmax.nav.Nav.prototype.domContent_ and zkmax.nav.Navitem.prototype.domContent_. In that case, you basically decide what to render as part of the node. you can either test if the node is the first-level child of the navbar (and add a label to display), or just add a label all the time and use CSS to target 1st-level nav and navbar anyway Have a look here for a fiddle example: http://zkfiddle.org/sample/cmu1h9/2-navbar-collapsed-label

link publish delete flag offensive edit


Thank you this is very helpful :-)

tisaksen ( 2019-03-06 15:38:41 +0800 )edit

Thanks :)

MDuchemin ( 2019-03-06 16:20:25 +0800 )edit

also, in a prod scenario, you will probably want to make the script into an external JS file and load it from a global source (like lang-addon) if you reuse this customization in multiple places

MDuchemin ( 2019-03-06 16:21:25 +0800 )edit

Good tips! Thanks again

tisaksen ( 2019-03-06 16:32:41 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2019-03-01 21:18:48 +0800

Seen: 9 times

Last updated: Mar 05 '19

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More