WordPress.org

Ready to get started?Download WordPress

Forums

bullet between horizontal nav? (7 posts)

  1. basewind
    Member
    Posted 1 year ago #

    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
    }

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry, we'll need a link to a working example of the issue (i.e webpage) for CSS-based issues.

  3. basewind
    Member
    Posted 1 year ago #

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    You want to know how to select the first menu item ?

  5. basewind
    Member
    Posted 1 year ago #

    Yep... is there a way to do it?

    - bear in mind I'm building a multi-blog site, so I have no way of predicting the menu id for the "first" item.

    Mike

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you use CSS first-child ?

    E.g;

    ul li:first-child {
     border: 10px solid red;
    }
  7. basewind
    Member
    Posted 1 year ago #

    Thanks... that works on my dev environment, I'll have to check with test. I appreciate it!

    Mike

Topic Closed

This topic has been closed to new replies.

About this Topic