Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS border-bottom to simulate text-decoration: underline

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40782
    iamshawnrice
    Participant

    Hey Guys. Bit of a head-scratcher here.

    I am trying to add an underline to the ‘current’ page item in the nav menu here: http://iamshawnrice.com/demo/jlross/?page_id=102#.UKKkU-Q8CSo

    My Code:

    #top-menu ul.nav li {
    padding: 0;
    float: left;
    width: 20%;
    font-family: ‘LeagueGothicRegular’, ‘Goudy Bookletter 1911’, arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    }
    #top-menu ul.nav li a {
    font-size: 24px;
    color: #555;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(176, 176, 176, .5);
    -webkit-transition: all .5s ease-in-out;
    padding-bottom: 0px;
    width: 100%;
    }
    #top-menu > ul > li.current-menu-item > a {
    font-family: inherit;
    color: #333 !important;
    font-style: normal !important;
    border-bottom: 2px solid #333;
    }

    I need the
    #top-menu ul.nav li a
    item to not be 100% width, but to be centered in it’s parent container.

    Any thoughts?

    #114225
    Paulie_D
    Member

    Do you mean that the link (a) should be say 80% width of the li with 10% margin on either side?

    Like this: http://codepen.io/anon/pen/zyhre

    #114226
    Senff
    Participant

    Remove float:left; and display:block; from .nav a (styles.css, line 344).

    #114229
    iamshawnrice
    Participant

    GENIUS!

    Thanks, Senff.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.