28172 sujets

CSS et mise en forme, CSS3

Mettre une image fixe au-dessus de la navbar (Bootstrap)

Bonjour,

je cherche à faire quelque chose d'apparemment simple (et très répandu sur le web), mais je trouve peu de réponses satisfaisantes sur le sujet (je farfouille sans doute mal... Smiley biggrin . Je souhaite mettre une image fixe au-dessus de ma navbar et qui fasse bloc avec elle. De sorte d'imtégrer le titre de mon site juste au-dessus de la barre de navigation. L'idée est d'obtenir quelque chose comme cela.

J'ai un peu bidouillé mais je n'arrive qu'à des résultats peu convaincants (décalage image navbar, proportions qui varient selon les écrans, etc.). Difficulté supplémentaire, j'aimerais conserver la fixité de la navbar (en haut de l'écran) quand on descend sur la page.

Quelle est selon vous la solution la plus propre?

Merci d'avance pour vos lumières.
M.

PS : je travaille avec le CSS de Bootstrap.
Ça semble pourtant pas plus compliqué que la nav seule. Position:fixed sur le header (logo/titre + nav)?
Modifié par Hermann (12 Mar 2013 - 00:23)
Moi j'ai trouvé quelque chose ( je debute aussi le bootstrap twitter ) en copiant le code source et en l'adaptant de cette page, et tout fonctionne :

http://twitter.github.io/bootstrap/examples/fluid.html#


CODE:


<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="brand">Project name</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a class="navbar-link" href="#">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>



Pour ce qui est de rajouter une image fixe sur la barre, j'irai chercher dans le css la class navbar-inner et je changerai le background-image par la ressource que tu souhaite.

J'espere que ça t'aidera.
Sujet clos
Aller à