piped navigation list

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Could someone please clarify the use of the 'pipe' symbol in navigation lists please!!

after doing some searches on ways to create inline pipe-separated navigation lists, I see that some people use only CSS, others use the pipe symbol directly, and others take a screenshot of the pipe symbol and use its image.

Basically I would like to have a similar navigation menu that yola uses (eg: home / blog / my yola / log in) on its homepage.

What is the most browser-friendly way of doing piped lists..??

In addtion, when I look at the CSS, I notice that the "log in" link is not part of a UL but is styled separately between paragraph tags. Is there a reason for this..?

Thanks!

Karl
Photo of bubastisbastet

bubastisbastet

  • 14 Posts
  • 2 Reply Likes
  • confused

Posted 8 years ago

  • 1
Photo of bubastisbastet

bubastisbastet

  • 14 Posts
  • 2 Reply Likes
i forgot to mention:

when i see the use of the pipe symbol directly, whether it be on other websites (via firebug), or online tutorials, it appears to be 'just there', ie. pasted from some source. BUT nobody says where they got it from!!

where does it come from? copy and paste as a symbol from a word doc?

or is it a vertical bar using at @#124 HTML code?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello! These (to me) actually look like borders on divs. They might be using border-right and border-left on them to do this. But they also might be using the horizontal rule HTML tag which is <hr size="" height="" />

I know this is one of the other.

I hope this helps.

Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello bubastisbasetet

You would need to create your own custom navigation if you wish to incorporate the vertical lines between each menu link as Nathan has suggested above. This cannot be done with the default menu.

To create your own custom navigation, you would need to click on "Edit Navigation" and drag the pages from "Pages in the Navigation" to "Pages out of the Navigation". Then, you can create your menu links using text links or image links. You can see our tutorial here: Creating Links.

I hope this answers your question. Please let me know if it does not.
Photo of bubastisbastet

bubastisbastet

  • 14 Posts
  • 2 Reply Likes
sanja,

actually you didn't answer my question at all....!

i understand i would need to create a custom navigation menu etc. my question was concerning the specifics of a piped list.

my question was two-fold:

1. where does the pipe symbol come from? what is the most universal (browser acceptable) way of incorporating the pipe symbol?

2. why is the 'log in' link in the yola menu inserted between paragraph tags and not kept as part of the unordered list used for the remaining links?

btw, thanks Nathan for your insights!

thanks,

bb.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem :)
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi bb

Sanja is currently offline, but I can answer your questions.

1. The pipe | symbol is on your keyboard. It will on depend on the keyboard you are using. On a US-standard keyboard, the vertical line/pipe symbol is the SHIFT + \ key. I found an online article on Wikipedia and a discussion forum that discusses this topic in more detail.

2. The 'log in' link on the Yola website is a script and this may be the reason the engineers have chosen to take it out of the UL.

I hope this answers your questions!

Many thanks
Nazlie
Photo of bubastisbastet

bubastisbastet

  • 14 Posts
  • 2 Reply Likes
Wonderful Nazlie- thank you for the clarification.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi, the piped symbol that they use isn't from SHIFT + \ though. They are using <hr> tags.

But SHIFT + \ looks just like it too: |

SHIFT + \ = |

Nathan