adding separator

  • Hi,

    I’m working on a new theme based on the twentyfourteen theme.
    I want to add some dot separators on the main navigation menu.
    So I rewrote this line in the head:
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'link_after' => '</a> ·' ) ); ?>

    the problem is that it adds a dot on the last loop
    Ex:
    Home – About – Info – Cars – Buses –

    Any ideas how to solve this?

Viewing 6 replies - 1 through 6 (of 6 total)

  • Why not use CSS to add your separators then remove the last one using the pseudo :last-child selector?

    Thread Starter hAtul

    (@free269)

    How exactly can I do this with this option?
    I can’t really understand

    Thread Starter hAtul

    (@free269)

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'link_after' => '</a> <span class="dot">·</span>' ) ); ?>

    .nav-menu > li:last-child{
   .dot{
   	display: none;
   }
 }

    * not all the list items have the same class

    So.. where is my mistake?

    Thread Starter hAtul

    (@free269)

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'link_after' => '</a> <span class="dot">·</span>' ) ); ?>
    .nav-menu > li:last-child{
   .dot{
   	display: none;
   }
 }

    * Not all the list items have the same class name. if it matters for some reason…

    So.. what is my mistake?

    Apply the dot using CSS and then remove it on the last item via :last-child.

    #Free269 Your really close just remove that nesting in the CSS:

    .nav-menu > li:last-child .dot {
   display: none;
 }

    Regarding #esmi comments:

    Sometimes adding bullets via CSS can be unpredictable on older browsers, as well as different media platforms such as tablet and iPhone… although the method mentioned above is cumbersome it does degrade better in older browsers. Could you provide some CSS you felt worked well for this purpose #esmi? thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘adding separator’ is closed to new replies.