Soporte » Guías – Resolución de problemas » Modificar color fondo de la barra de menú

  • Resuelto jonadz89

    (@jonadz89)


    Buenos días.
    Sabéis si podría cambiar el color de fondo de la barra del Menú y el color de la letra.
    muchas gracias de antemano.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 6 respuestas - 1 de 6 (de 6 total)
  • Hola,

    La mayoria de themes te permite hacerlo, como no indicas que theme usas no podemos orientarte pero lo puedes mirar en el personalizador, esta en apariencia o en la propia pagina de opciones del theme si existiese.

    El tema es specia standard, es que lo he intentado alguna vez desde el personalizador pero no doy con la tecla. Gracias

    He mirado el theme y yo tampoco veo ninguna opcion, asi que deberas añadir en CSS adicional el css para modificarlo.

    Usando el inspector del navegador localiza la seccion del menu y luego ves modificandolo.

    Si necesitas mas ayuda comenta que colores y cuando pueda te pongo el CSS.

    Muchas gracias y cual sería el código para cambiar el color de la barra del menú a este fucsia #ff00ff por ejemplo. Gracias por el tiempo

    Hola,

    Te pongo casi todo el CSS necesario para editar el menu. Como usa Bootstrap debes modificar varias clases asi que he comentado todos los valores para que solo edites lo que necesites y lo unico que he activado es cambiar el color de fondo del menu.

    
    .navbar-default {
      background-color: #ff00ff;
      /*border-color: #e7e7e7;*/
    }
    .navbar-default .navbar-brand {
      /*color: #777;*/
    }
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {
      /*color: #5e5e5e;*/
      /*background-color: transparent;*/
    }
    
    .navbar-default .navbar-nav > li > a {
      /*color: #777;*/
    }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
      /*color: #333;*/
      /*background-color: transparent;*/
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
      /*color: #555;*/
      /*background-color: #e7e7e7;*/
    }
    .navbar-default .navbar-nav > .disabled > a,
    .navbar-default .navbar-nav > .disabled > a:hover,
    .navbar-default .navbar-nav > .disabled > a:focus {
      /*color: #ccc;*/
      /*background-color: transparent;*/
    }
    .navbar-default .navbar-toggle {
      /*border-color: #ddd;*/
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      /*background-color: #ddd;*/
    }
    .navbar-default .navbar-toggle .icon-bar {
      /*background-color: #888;*/
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
      /*border-color: #e7e7e7;*/
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
      /*color: #555;*/
      /*background-color: #e7e7e7;*/
    }
    @media (max-width: 767px) {
      .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        /*color: #777;*/
      }
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        /*color: #333;*/
        /*background-color: transparent;*/
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        /*color: #555;*/
        /*background-color: #e7e7e7;*/
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        /*color: #ccc;*/
        /*background-color: transparent;*/
      }
    }
    

    Lo pegas en el personalizador CSS Adicional y ves modificandolo. cuando quieras usar una propiedad elimina el /* y */ si ves que no se modifica, cambia ; por esto !important; para intentar forzarlo.
    Te recominendo que use el inspector para localizar mejor que clase es la que modifica x aspecto.

    Muchas gracias =)

Viendo 6 respuestas - 1 de 6 (de 6 total)
  • Debes estar registrado para responder a este tema.