Insérer un logo dans le menu sur Boostrap Twitter

Par Losthil, il y a 11 ans

Les bases HTML/CSS

Bonsoir à tous,

Je suis en train de réaliser mon premier site web en utilisant notamment le Boostrap de Twitter et un problème me tracasse:

Je n'arrive pas à ajouter correctement mon logo en haut à gauche de mon menu. Soit il y a un décalage vertical de niveau entre les parties de mon niveau , soit le logo ne se réduit pas en responsive !

Que faire?

10 réponses

Grafikart, il y a 11 ans

Il faut réécrire des règle par dessus je pense car twitter bootstrap n'aime pas que tu sorte du cadre :)

Losthil, il y a 11 ans

D'accord merci pour l'info ! :)
CCependant quelles sont les règles que je dois récrire par dessus ? (désolé mais comme j'ai pas mal essayé et que je n'ai pas de bon résultat, je suis un peu pommé là)

prince224, il y a 11 ans

Tu dois te crée ton propre fichier CSS et rédéfinir les règles que tu veux.
NB : dans ta page HTML tu dois insérer le lien de ton fichier CSS en dessous de celui de Bootstrap, pour qu'il soit prit en compte.

Espérant que ceci puisse taider

Losthil, il y a 11 ans

Oui oui j'ai compris, Mais quelles règles dois-je mettre ?

Losthil, il y a 11 ans

Bien sûr, je vous envoie tout ça ce soir

Losthil, il y a 11 ans

HTML:

<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><span class="logo"><img src="img/logo.png" width="15%"></span> ARS GaminG</a> </div>

CSS:

/** Logo **/ .navbar-brand {color: #222!important; font-size: 40px; font-weight:700;} .logo {position: relative; width: 50px} /*.signelogo {color:#fff; background:#e95850; font-weight: 700; padding: 5px 12px; }*/ /** Liens **/ .navbar-nav > li > a {color:#102025 !important; font-size: 18px;} .navbar-nav > li > a:hover {color:#e95850 !important} .navbar-nav > .active >a {background:#fff!important; color:#e95850 !important}

Rendu:

http://www.hostingpics.net/viewer.php?id=159258Menu.jpg

Problèmes:

  • L’insertion du logo créé un déséquilibre : espace vide plus important en haut qu'en bas.
  • La dimension du logo ne bouge pas si l'on tente de réduire la fenêtre (pas de responsive)
  • L'alignement Logo/Menu n'est pas tout à fait parfait
prince224, il y a 11 ans

Déjà dans la balise img, j crois que tu dois retirer le style (width : 15%) et utiliser le système de grille fourni par Bootstrap 3.
En plus pourquoi tu n'utilise pas les propriétés Nav et navbar fournis par Bootstap ? cela te simplifierai beaucoup la vie je crois.Tu peux trouver des exemple ICI

Losthil, il y a 11 ans

Malgré plusieurs tentatives comme celle-ci :

HTML

<div class="navbar-header"> <a class="navbar-brand" href="index.html"> <span class="signelogo"> <img alt="Logo" src="img/logo.png">ARS GaminGaround </span> </a>

ou encore:

<div class="navbar-header"> <a class="navbar-brand" href="index.html"> <img alt="Logo" src="img/logo.png"> ARS GaminG </a>

Avec ce CSS:

/** Logo **/ .navbar-brand {color: #e95850!important; font-size: 40px; font-weight:700;} .signelogo {color: #1e292e; font-weight: 700; padding: 5px 12px;} /** Liens **/ .navbar-nav > li > a {color:#102025 !important; font-size: 18px;} .navbar-nav > li > a:hover {color:#e95850 !important} .navbar-nav > .active >a {background:#fff!important; color:#e95850 !important}

J'obtiens tjr ce resultat:


http://www.casimages.com/i/15032202473499487.jpg

Losthil, il y a 11 ans

SOLUTION:

<a class="navbar-brand" href="index.html"> <img style=" **margin-top: -55px;**" alt="Logo" src="img/logo.png" class="pull-left"> <span class="stylelogo">ARS GaminG</span> </a>