WordPress Split Menu

Estou codificando meu primeiro Tema do WordPress e tentando resolver esse problema:

Na versão desktop do site, eu gostaria de dividir o menu em 2 seções. Apareceria à esquerda do logotipo e outro à direita do meu logotipo (o logotipo está centrado). A única maneira de saber como fazer isso é criar 2 objects MENU separados em WP e, em seguida, com a posição CSS cada um em conformidade.

Isso, no entanto, causa um problema quando eu quero converter o menu em um menu suspenso amigável para dispositivos móveis, porque na abordagem mostrada acima, acabo com 2 listas separadas de itens de menu (esquerda e direita) e não sei como Eu os mesclam em uma lista para o menu suspenso amigável para dispositivos móveis.

Eu entendo que posso escrever CSS personalizado para adicionar margem entre o item 2 do menu e o item 3, por exemplo. Mas desde que estou escrevendo um tema, essa abordagem não funcionará, pois exige saber por diante quantos itens de menu estarão presentes. Preciso que seja algo que funcione, independentemente da quantidade de itens de menu e que permita às pessoas reorganizar itens de menu usando o WP Menu UI.

Este é o caminho errado para enfrentar isso? Se você pudesse sugerir como abordar isso melhor, seria muito apreciador.

Solutions Collecting From Web of "WordPress Split Menu"

Você pode fazer isso via css, pressionando o primeiro elemento do segundo menu e, em seguida, posicione: absoluto seu logotipo, por exemplo (não testado)

#element li:nth-child(4) { margin-left:300px; } #logo { position:absolute; left:500px top:50px; } 

Mude os pixels para os comprimentos desejados

Isso também pode ser feito com jQuery adicionar, por exemplo,

 $( "#element li:nth-child(3)" ).append( '
    ' );

Você então alvejaria o segundo menu com sua nova class, por exemplo, .right

Só queria deixar todos saberem que acabei usando a sugestão por @ selfagency acima. Não foi postado no formato de RESPOSTA, então não consegui votar para ele, aqui está:

“Talvez configure um terceiro menu para o celular em Aparência> Menu e mostre o menu móvel na sua folha de estilos móvel ao ocultar os outros dois. É mais sensato fazê-lo dessa maneira, de qualquer forma, se quiser otimizar a experiência para usuários móveis”

Eu achei a solução mais fácil e funciona muito bem! Obrigado 🙂

O resultado pode ser visto em http://www.speakforwolves.org