Loading...
Skip to main content
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Horizontal menu text styling
View published 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.
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Included themes
Bootstrap component sets
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
Tiki_org_family_customizations_CSS
BookStacked
Make an SCSS-Compiled Tiki Theme
...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 branch 27x
Wed 24 of Apr, 2024 11:12 GMT-0000
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000