History: Horizontal menu text styling

View page

Source of version: 2 (current)

Tiki's "topbar" horizontal menu is often in a rectangular area with a particular height and styled background. What needs to be done for a CSS menu in Tiki to look good and work correctly in that location?

!! Vertical position of text in top level
The CSS menu stylesheets don't specify any height for the menu or height or top or bottom padding or margins for the menu items. The only related rule in cssmenus.css is that the links have a line-height of 1em, and the text inherits the default size it gets from the body rule. Any other menu styling needs to be done in the theme stylesheet. 

Typically, the context of the horizontal menu is like
* div#tiki-top
** nav (or div).role_navigation
*** ul.cssmenu_horiz
**** li.menuSection
***** a (link)
****** span.menutext (*)
(*) Thinking that this span doesn't enable anything that can't be done with the anchor, I don't know what it was added for, but I guess it was useful to someone, so it's here.

Typically in Tiki's themes, the vertical position of the menu link text relative to the rectangle that contains them is set with padding on the link:

|| __Theme__ | div#tiki-top height | link font size | link padding
Green Blog | 59px | 12px | 14px 1em (top: 14px, right: 1em, bottom: 14px, left: 1em)
Fivealive | 50px (min-height) | 13px | 17px 1em 15px (top: 13px, right and left: 1em, bottom: 17px) ||

So the rule would be something like
~pp~
#tiki-top .cssmenu_horiz li a {
    font-size: 12px;
    padding: 16px 12px;
} ~/pp~

Another method would be to not use padding but to specify the height of the ''a'' and give it a line-height of the same size.
~pp~
#tiki-top .cssmenu_horiz li a {
    height: 32px;
    line-height: 32px;
}~/pp~

Any style specified for the menu's top-level ''a'' will be inherited by the ''a'' items below it, but since the text in the dropdowns is often more tightly spaced than in the top level of the menu, it will probably be necessary to specify padding and/or line-height for these child ''a''s. These can be selected contextually, like

~pp~#tiki-top .cssmenu_horiz ul li a~/pp~

with another "ul" added to the sequence for the dropdown list of menu items.

!! Other styling details
* if you want to adjust the popup box of options while hover a sewction level 0, you can adjust
~pp~.cssmenu_horiz ul {margin-top: 12px}~/pp~
Coming soon.

Switch Theme

Layout

Latest Changes

No records to display ...more

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!

Don't miss major announcements and other big news!

Site Config

Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT
Site updated to Tiki 14 beta
Tue 21 of Apr, 2015 00:01 GMT
Testing Tiki10
Thu 15 of Nov, 2012 23:06 GMT
Configurable header buttons in XtratoVeil layout
Wed 17 of Oct, 2012 14:54 GMT

History: Horizontal menu text styling

Source of version: 2 (current)

Switch Theme

Layout

Latest Changes

Subscribe to Tiki Newsletters!

Site Config

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Themes - Tiki Wiki CMS Groupware