O'Reilly logo

CMS Made Simple 1.6 by Sofia Hauschildt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action—design navigation with pure CSS

We are now going to style the top navigation so that it looks like buttons displayed beside each other instead of below each other.

  1. In the admin console, click on Layout | Templates, and open My first template for edit.
  2. Add the HTML <div> tag around the {menu number_of_levels="1"} tag, as shown in the following screenshot:
    Time for action—design navigation with pure CSS
  3. Click on Submit.
  4. Open My First Style Sheet from the list of stylesheets (Layout | Stylesheets) for editing.
  5. Add style formats for the container top-navi at the end of stylesheet, as shown in the following code snippet:
    #top-navi ul { height: 22px; padding: 0px; margin: 10px 0; border-top: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required