WordPress.org

Support

Support » Themes and Templates » bullet between horizontal nav?

bullet between horizontal nav?

  • I have horizontal menu with vertical lines between the items. The current code takes advantage of a “first” class added only to the first menu item. I can’t figure out how to do this in WordPress. Can someone please help me?

    The current menu looks like this:

    First | Second | Third | Last

    NOTE: In this example “Third” is the active page, and appears bold.

    The current html code looks like this:

    <div class=”nav”>
    <ul class=”menu”>
    <li class=”menu-item first”>First
    <li class=”menu-item”>Second
    <li class=”menu-item active”>Third
    <li class=”menu-item last”>Last

    </div>

    Stylesheet looks like this:

    .nav ul {
    padding: 8px 20px;
    list-style-type: none
    }

    .nav li {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px #b3b3b3 solid
    }

    .nav li.active, .nav li.active a {
    font-weight: 800;
    }
    .nav li.first {
    border-left: none;
    padding-left: 0
    }

Viewing 6 replies - 1 through 6 (of 6 total)
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘bullet between horizontal nav?’ is closed to new replies.
Skip to toolbar