[Duda] Cambio de tamaño de fuente en el navbar

¡Buenas!

Estoy teniendo algunos problemas con el tutorial de 'personalizar la barra de navegación'. Concretamente, mi problema es que, al agrandar la font, los campos como "buscar, perfil, calendario, índice, mensajería" y tal se posicionan de manera diferente, y aunque he intentado corregir esto, siempre termino haciéndolo mal y nunca logro que quede bien acomodado.

Adjunto otra duda, ¿Cómo podría quitar la línea blanca debajo de las opciones?

Me explico un poco mejor con imágenes:



Es como aparecería el 'resultado' sin alterar absolutamente nada, copy pasteado del tutorial.¡Sa



Al modificar solo el tamaño del título.

Espero que puedan ayudarme

Hola Bluebird, bueno para el tutorial de personalizar el navbar, se supone que tenemos 3 elementos que componen nuestra barra de navegación personalizada:

Código:

<div class="Navegacion">
<div class="Nombresito">Mr. Bojardles</div>
<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>

1) El div llamado Navegación que es en sí la barra de navegación completa, la que movemos para que quede fija en la parte superior de la página, y a la que colocamos el fondo, en tu caso negro.

2) El div llamado Nombresito con nuestro titulo personalizado, en tu caso SakuraFubuki, al agrandar la letra también debes tener en consideración que el div se va a 'agrandar' para adecuarse al tamaño de la tipografia, por lo que deberás también agrandar la barra de navegación, puedes arreglar esto colocando un padding: 5px; en el div Nombresito, como para que quede un pequeño espacio entre el nombre y el fondo de la barra.

3) El elemento ul.navlinks es el que va a contener los links de navegación como son índice, buscar, miembros, grupos, perfil, etc. Asegurate que este elemento no tenga nada agregado en el CSS como puede ser el borde blando que mencionas, y mediante CSS también puedes moverlo y acomodarlo según la posición que deseas en la barra de navegación.

Código:

.Navegacion ul.linklist {
    display: inline-block!important;
    margin-left: 290px; /* Usa esto para agregar espacio a la izquierda */
    margin-top: -34px; /* Usa esto para agregar espacio arriba */
    width: 900px; /* Aqui puedes poner el ancho que tu desees */
    border:0!important; /* Con esto quitarás el borde */
}

¡Espero que se haya solucionado!