Imagens da barra de navegação muito pequenas e com cores invertidas

Detalhes da questão

Endereço do fórum: https://29hungergames.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Boa tarde,
Gostaria de saber se há alguma solução para o que está a acontecer com o meu fórum - quis mudar as imagens da barra de navegação para que a barra fosse apenas com imagens (sem texto, já selecionei essa opção), mas todas as imagens ficaram com um tamanho muito reduzido e com as cores invertidas. As cores originais só aparecem quando o cursor está por cima da imagem. Presumo que o problema seja do tema ou da versão do fórum, pois tentei usar as mesmas imagens num antigo fórum meu com outra versão e funciona corretamente.

Gostaria então de saber se é possível ter a barra de navegação com as imagens do tamanho e cor normais, e sem um espaço enorme entre cada imagem (queria que ficassem todas juntas) sem ter que alterar a versão do fórum, pois tirando esse pormenor da barra de navegação estou a gostar bastante de trabalhar com esta versão.
A ideia seria a barra corresponder ao tamanho do título do fórum que fica por baixo, as dimensões escolhidas para as mesmas tinham sido feitas com as mesma largura para esse mesmo efeito.  

Agradeço desde já pela ajuda e atenção.

Olá @Lunafox,

Primeiramente bem vinda ao Fórum dos Fóruns.

Bem-vindo ao Fórum dos Fóruns! Seja bem-vindo ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber: Regras do Fórum, e o que você não deve fazer neste fórum; Lista de tutoriais e perguntas frequentes; A Equipe de Suporte; A função de busca.

Voltando a sua questão sim é possível arrumar sem alterar essa versão, ajude-me só onde se localiza a barra de navegação atualmente? Me perdi um pouco dentro do forum, se possível mostre uma Print!

Atenciosamente,
Sleep

Olá @Sleep,
muito obrigada pelas boas vindas e pela disposição em ajudar. Fico contente em saber que é possível fazer o pretendido com esta versão

Como pedido, fica aqui o print assinalando a barra de navegação:


Aproveito também para deixar uma montagem do efeito final que eu pretendia alcançar:

Olá @Lunafox,

Adicione na sua folha de estilo o seguinte código:

Código:

.mainmenu img {
  width: 100% !important;
  height: auto !important;
  filter: invert(0%);
}
 
.mainmenu,
.mainmenu img {
  margin: 0 !important;
  padding: 0!important;
}
 
.mainmenu:hover {
  background: transparent !important;
  box-shadow: none !important;
}

Atenciosamente,
pedxz.

Olá pedxz,

Funcionou perfeitamente! Muito obrigada!

Tópico resolvido Movido para "Questões resolvidas".