Navigation image dividers in TwentyTen without trailing divider

  • Resolved sandra408

    (@sandra408)


    11 years, 4 months ago

    Hi.

    I can’t figure out a solution to removing the first and last trailing divider (a background divider image) in my TwentyTen based theme menu.

    How do I assign a class to my home page link (first) and my last page link (last)?
    I suppose I have to edit my functions.php and my css files, but everything I tried so far did not work out…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter sandra408

    (@sandra408)

    11 years, 4 months ago

    Here is the solution:

    1- open your style.css file

    2- scroll down the “menu” section of your css (twenty ten section starts with /* =Menu)

    3- make sure to “first” upload your gif image to your server, mine for instance was located in:

    http://yoursite.com/images/navdivider.gif

    4- paste in this line of code (though swap out your own site info) into your style.css file

    #access li { background: url(http://yoursite.com/images/navdivider.gif) no-repeat right center;}

    Thread Starter sandra408

    (@sandra408)

    11 years, 4 months ago

    It still does not take care of the last divider…

    Thread Starter sandra408

    (@sandra408)

    11 years, 4 months ago

    This resolved it in css file:

    #access .menu-header ul,
 div.menu ul {
 margin: 0;
 list-style: none;
 }

#access .menu-header li, div.menu li
 {
 float: left;
 position: relative;
 padding-left: 18px;
 background-image:
url(images/dot-separator.png);
 background-repeat: no-repeat;
 background-position: 0 .2em;
 }

div.menu li:first-child
 {
 background:none;
 }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Navigation image dividers in TwentyTen without trailing divider’ is closed to new replies.