Marca de centro en barra de navegación con elementos en cada lado

Estoy tratando de centrar mi marca que contiene un logotipo en mi barra de navegación. Básicamente quiero una marca centrada con elementos de menú que la rodean (por ejemplo, dos elementos de menú a la izquierda y dos a la derecha de la marca).

He intentado varias cosas como esta: Wrap Bootstrap navbar list items alrededor de la imagen de marca centrada , y funciona, pero preferiría una solución sin javascript.

También he intentado algo como esto

.navbar-header { float: left; padding: 15px; text-align: center; width: 100%; } .navbar-brand {float:none;} 

pero esto solo centra la marca y no la mueve entre los elementos del menú, por lo tanto, se amontona encima de ellos.

También intenté agregar el logotipo a un elemento del menú, y aunque funciona en computadoras de escritorio, no se ve muy bien en los dispositivos móviles, ya que es un elemento de menú común y, por lo tanto, forma parte del menú desplegable.

Aquí hay un par de ejemplos de lo que he intentado: http://www.bootply.com/114800 y http://www.bootply.com/114804 .

¿Cómo puede hacerse esto?

¡Encontré una solución! Esto es bastante similar a lo que hice primero, pero agregué CSS que también lo hará funcionar en dispositivos móviles.

En primer lugar, simplemente agregué un elemento del menú entre mis otros elementos del menú

  

al igual que. También mantuve la marca normal que está predeterminada en la barra de navegación del bootstrap, pero agregué la clase visible-xs para que sea visible solo en resoluciones más bajas

  

Entonces tengo el siguiente CSS para apoyarlo. Todo lo que hace es simplemente ocultar el logotipo de la navegación y mostrar la marca predeterminada en su lugar

 @media (max-width: 768px) { .navbar-nav .logo { display:none; } } .navbar-nav .logo { opacity: 1; vertical-align: middle; } 

Aquí hay un ejemplo de algunos CSS que uso para 3 secciones (para centrar una sección en el medio). Si va a tratar de lograr esto flotando, necesita flotar todos los elementos para que sean relativos entre sí. Coloco estos dentro de un div con clase .blocky.

(EDITAR): agregué cierta información para asegurarme de que esto esté centrado para usted. Y técnicamente podría eliminar la clase de sección correcta, y simplemente colocar las secciones izquierda y intermedia luego, pero en un momento estaba usando la clase correcta para borrar algo. Así que juega con eso como quieras.

 

Avíseme si necesita más explicaciones o si puedo aclarar esto. Por cierto, las aclaraciones en el CSS son para asegurarse de que nada más termina en esta alineación, y por supuesto los números de relleno, los márgenes y el ancho pueden cambiarse o en algunos casos eliminarse por completo.

 .blocky { overflow: auto; padding-right: 10px; margin-left: auto; margin-right: auto; float:none; } .leftSection { float: left; width: 236px; padding-left: 10px; padding-right: 10px; margin-bottom:20px; margin-top: 5px; clear: left; } .rightSection { float: right; width: 236px; margin-bottom:20px; margin-top: 5px; clear:right; } .middleSection { float: left; width: 236px; padding-right: 10px; margin-bottom:20px; margin-top: 5px; }