Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #275073


    How can I add pipes ” | ” to the navigation? I see in the code:

    .main_menu .avia-bullet {
    display: none; change to –> display: inline-block;

    It will change to arrows. But I would like them to change to pipes. How can I do that?

    Web site is http://allanhendydesigns.com/



    Hey Brian!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .av-main-nav > li > a { border-right: 1px solid #e2e2e2; }

    Best regards,


    Thanks Yigit,

    However, the height of the pipes are way too big. How can I make them so they adjust to same height of each navigation item (i.e. if each navigation item is 36 pixels high, make the height of the pipes 36 pixels high)? If this cannot be done, how can I add in a standard character pipe ” | ” ?





    .av-main-nav > li > a:before{
    content: "|";



    Don’t use ” | “. Try this CSS-code:

    .avia-menu-text {border-left:1px solid;padding-left:10px;}

    …and that’s all.

    • This reply was modified 3 years, 6 months ago by  Bogdan.

    Thanks Bogdan,

    I’ve updated the code to:

    .avia-menu-text {
    border-left:2px solid;padding-left:20px;

    One minor thing. Is there anyway to remove the pipe from the left of “HOME”?



    This will do it:

    #avia-menu li:first-child .avia-menu-text {
        border: 0;

    Best regards,


    Perfect. BTW, this is the best theme I’ve used since I started in WordPress years ago. Well done.


    Thanks for the kind words, glad we could help :)

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Add Pipes " | " to Navigation’ is closed to new replies.