Dúvida de como colocar essa barra | entre os botões para separar

De quais botões está falando Rodrigo?

dois botão do menu em linha queria separar com um espaço e no meio de cada botão queria colocar essa barra | tipo o site da adidas STATUS DO PEDIDO | essa barra CADASTRO DA NEWSLETTER

Existem várias formas amigo, Você poderia utilizar um border-right:1px solid #000; por exemplo, no css referente ao link do menu.

No site da Adidas como você citou eles utilizam depois de cada link um <span class="delimiter"></span> no html e no css:

 .delimiter {
    display: inline-block;
    vertical-align: top;
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.25);
}

Eu prefiro utilizar os pseudo-elementos pra isso, utilizar elementos HTML vazios apenas para ter um pequeno estilo não me parece uma boa prática, sendo que, sim, com interfaces muito complexas não tem pra onde fugir. Algo como:

selector::after{
    content: "";
    height: 10px;
    width: 2px;
    background: #ccc;
}

Claro que não é só isso, há questões de margens e posicionamentos ainda. Mas já é um começo.