Modifications multiples de la Barre de navigation

[Momie0]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sacu.forumactif.com/

Description du problème

Bonsoir, serait-il possible de faire des modifications au niveau de la barre de navigation, svp ?
Le but serait de créer une barre plus épurée.

- Supprimer à droite, ligne inférieure l'option "Rechercher".


- Réduire la barre de navigation en une seule ligne.
- Centrer tous les boutons éxistants d'origine dans la ligne par le milieu.


- Diminuer la barre de navigation dans sa largeur.
- Et pour finir, comment changer la couleur de fond.

Par avance, Merci à vous pour les réponses que vous pourriez me faire ...
Bonne soirée.
Cordialement.

[Bipo]

Bonjour Momie0,

- Supprimer à droite, ligne inférieure l'option "Rechercher".

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

.search-box, #search-box {
display: none;
}

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

- Réduire la barre de navigation en une seule ligne.

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

ul.navlinks {
border-bottom: none;
}

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

Cela permettra de retirer la ligne blanche pour avoir un résultat plus ergonomique.

- Centrer tous les boutons éxistants d'origine dans la ligne par le milieu.

Panneau d'Administration → Affichage → Page d'accueil → Entête et Navigation :

N'oubliez pas de cliquer sur le bouton pour sauvegarder vos modifications.

- Diminuer la barre de navigation dans sa largeur.

Avec les modifications opérées plus haut, elle aura une largeur convenable. Toutefois, si vous souhaitez encore la réduire :

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

.navbar {
height: 25px;
}

Il faut changer la valeur 25 par la largeur souhaitée.

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

- Et pour finir, comment changer la couleur de fond.

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

.navbar {
background-color: #cadceb;
}

Il faut changer la valeur #cadceb par le code couleur souhaité. Par exemple, vous pouvez vous rendre sur ce site [ici] pour trouver une belle couleur !

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

Bonne journée.
Bipo.

[Momie0]

Bonsoir Bipo, Merci à vous pour toutes les réponses.
Net, efficace et clair, bravo à vous !  

Avec les modifications opérées plus haut, elle aura une largeur convenable

Vous avez parfaitement raison pour ce sujet et c'est moi qui a mal formulé ma demande, désolé ...
je parlais de diminuer par le côté gauche et droit (voir capture ci-dessous), de réduire la barre dans sa largeur ou si vous préférez sa longueur ...
Si cela est possible, bien sûr, svp ?



Par avance, Merci à vous !

Bonne soirée.

Cordialement.

[Bipo]

Bonsoir Momie0,

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Insérez le code :

Code:

#page-header .navbar{
margin: 0 auto;
width: max-content;
}

Cliquez sur le bouton VALIDER pour enregistrer les modifications.

---

Si le dernier code fonctionne, est-ce que vous pourriez me donner l'ensemble de votre CSS entre les balises [code] ? Je vais essayer de vous le réécrire correctement avant de clore ce sujet.

Bonne soirée.
Bipo.

[Momie0]

Bonjour Bipo, Merci pour les réponses.

J'ai un effet de bord avec le code couleur, lorsque je me connecte la barre du bas prend la couleur de la barre de navigation,
peut-on empêcher cela, svp ?



Pour le reste c'est génial et nickel

Par avance, Merci et bonne journée à vous.

Cordialement.

[Bipo]

Bonjour Momie0,

Est-ce que vous pourriez me donner l'ensemble de votre CSS entre les balises [code] ?

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

[Momie0]

ci-joint le code dans sa totalité :

Code:

.search-box, #search-box {
display: none;
}

ul.navlinks {
border-bottom: none;
}

.navbar {
height: 41px;
}

#page-header .navbar{
margin: 0 auto;
width: max-content;
}

.navbar {
background-color: #F4FD86;
}

Merci.

[Bipo]

Re, Momie0,

Panneau d'Administration → Affichage → Couleurs & Images → Couleurs - Feuille de style CSS

Supprimez l'entièreté de votre CSS et remplacez-le par celui-ci :

Code:

/* Supression du module recherche (menu) */

.search-box, #search-box {
  display: none;
}
 
/* Supression barre blanche (menu) */
ul.navlinks {
border-bottom: none;
}
 
/* Personnalisation du menu (index) */
#page-header .navbar{
  background-color: #F4FD86;
  height : 40px;
  margin: 0 auto;
  width: max-content;
}
 


Cliquez sur le bouton VALIDER pour enregistrer les modifications.

---

Normalement, tout devrait être bon

Bonne journée.
Bipo.

[Momie0]

Merci Bipo, c'est exactement la vue que je désirais ...
Plus de pbs et Merci aussi pour la documentation des sections du code, c'est sympa et plus facile pour moi.

Du beau travail ...
Merci pour le temps passé sur mon sujet.

Bonne journée à vous.

Cordialement.