Loading...
 
Skip to main content

History: Tiki project sites navbar improvement

Preview of version: 3

Notes and suggestions can go here.

It doesn't look quite well to me:
Make A Wish   Tiki Wiki CMS Groupware    Development Tiki Project Sites Navbar Improvement   Themes For Tiki Wiki CMS Groupware

Yeah, the site titles are kind of long, so cause problems, for one thing.

Steps taken

Anyway, about what I did to try to improve the appearance and usability, I removed the logo module. This module works fine in large screen sizes, but not in the small view, if you want the logo to be seen and be clickable to the home page.

When one of the fixed navbar layout templates is used, there's no need to assign the logo module now if there's a menu in the top module zone - the site icon is displayed if it is specified in the menu's module assignment. This way the small-device view gets the site icon/logo, which didn't happen before when assigning the logo module. Earlier, just the "Fixed top navbar 2" layout template had the link to the site icon/title hard-coded, but in a recent commit it was added to the "Fixed top navbar 1" layout template as well.

When other layout templates (Basic Bootstrap, Classic Tiki, etc.), the logo module can be used in larger screen sizes, but should be hidden in small sizes; the site icon takes its place (assuming the top module zone contains a menu that has the site icon assigned as a parameter).

Unassigning the logo module also fixed the positioning of other items in the module zones that were pushed out of place due to things being too crowded.

Top module zone assignments at this site:

Name Order Parameters
menu 1 id=48%%%navbar_toggle=y
nobox=y
topclass=hidden-lg hidden-md
Tiki_sites_dropdown 2 nobox=y
topclass=col-sm-2 hidden-xs hidden-sm*
login_box 3 mode=popup
remember=y
nobox=y
style=margin-right:-15px;margin-left:-15px
topclass=col-md-2 hidden-xs hidden-sm
quickadmin 4 nobox=y
topclass=col-sm-2 pull-right

*The login form is hidden in small views, and a second login module is assigned to the pagetop module zone and made visible in small views only.

A custom CSS rule is added to fix quickadmin dropdown not being visible in small screens. Bootstrap normally uses overflow-y: auto, but this doesn't seem to be sufficient here for some reason:

Copy to clipboard
.navbar-collapse.in { overflow-y: visible; }

History

Advanced
Information Version
Sun 29 of Jan, 2017 09:27 GMT-0000 Gary Cunningham-Lee Info on configurations updated. 16
Sun 29 of Jan, 2017 07:25 GMT-0000 Gary Cunningham-Lee Updated info about the navbar configuration. 15
Sat 28 of Jan, 2017 11:16 GMT-0000 Gary Cunningham-Lee More CSS put in code plugin. 14
Thu 26 of Jan, 2017 07:54 GMT-0000 Gary Cunningham-Lee 13
Thu 26 of Jan, 2017 07:38 GMT-0000 Gary Cunningham-Lee Another note added. 12
Wed 18 of Jan, 2017 12:15 GMT-0000 Gary Cunningham-Lee Some ideas added. 11
Tue 17 of Jan, 2017 14:26 GMT-0000 Gary Cunningham-Lee Added comments. 10
Tue 17 of Jan, 2017 14:20 GMT-0000 Gary Cunningham-Lee Question added. 9
Tue 17 of Jan, 2017 14:16 GMT-0000 luciash d' being ?‍♂️ 8
Tue 17 of Jan, 2017 13:58 GMT-0000 luciash d' being ?‍♂️ 7
Tue 17 of Jan, 2017 13:54 GMT-0000 luciash d' being ?‍♂️ 6
Tue 17 of Jan, 2017 13:52 GMT-0000 luciash d' being ?‍♂️ some suggesstions 5
Tue 17 of Jan, 2017 13:28 GMT-0000 Gary Cunningham-Lee Minor text edit. 4
Tue 17 of Jan, 2017 13:26 GMT-0000 Gary Cunningham-Lee Some descriptions added. 3
Tue 17 of Jan, 2017 12:59 GMT-0000 luciash d' being ?‍♂️ 2
Mon 16 of Jan, 2017 15:30 GMT-0000 Gary Cunningham-Lee 1