SBJ Online Services Como resolvías tus problemas antes de conocernos??? https://www.sbjonlineservices.com/wp-content/uploads/2017/11/fijar_menu_wordpress-1.jpg
SHARE

En una de nuestras webs necesitamos dejar el menú fijo y alargarlo para que ocupe el 100% del ancho de la página. En realidad es muy sencillo.

  1.  Localizar la clase CSS que define el comportamiento del menú
  2.  Modificar el ancho y añadirle la posición fija.
  3. Confirmar los cambios.

1 Localizar la clase CSS que define el comportamiento del menú

Para ello abro el navegador web (firefox o chrome) y escribo la dirección de la pagina que voy a modificar, en este caso www.rincondeltecnico.es y abro las opciones de desarrollador.

con la herramienta seleccionar pulsamos sobre el menu y nos fijamos en la caja de estilos CSS situada a la derecha.
SBJ Online Services Como resolvías tus problemas antes de conocernos???
en el recuadro verde de la imagen de arriba encontramos la clase que define el comportamiento del menu. en este caso «.desktop .sbj-nav» y en el recuadro azul el archivo donde está definida esta clase.


.desktop .sbj-nav {
    min-width: 700px;
    width: 90%;
    padding-left: 6px;
    padding-right: 6px;
}

2º  Modificar el ancho y añadirle la posición fija.

Para ello accedemos por FTP a nuestro servidor y localizamos el archivo que queremos modificar. si posicionamos el raton sobre el nombre del archivo donde están definidas las clases, nos indicara cuál es la ruta completa del archivo.

SBJ Online Services Como resolvías tus problemas antes de conocernos???
Ruta del archivo a modificar

SBJ Online Services Como resolvías tus problemas antes de conocernos???

No solo nos indica la ruta, el número de la derecha es la linea del archivo donde está definida esa clase.

Así que entramos en dicha ruta por FTP y editamos el archivo para añadir a la clase .desktop .sbj-nav {} los parámetros:

position: fixed;
Width: 100%;

Por lo que la clase ya modificada quedaría de la siguiente forma:

.desktop .sbj-nav {
min-width: 700px;
width: 100%;
padding-left: 6px;
padding-right: 6px;
position: fixed;
}

una vez modificado el archivo, actualizamos la pagina web y veremos el menu fijo y ocupando el 100 por 100 de la página.
SBJ Online Services Como resolvías tus problemas antes de conocernos???

 

SHARE

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.