Bonjour tout le monde , j'ai réaliser une landing page avec bootstrap et css , est j'ai modifier pour être responsive , mais tout le contenu devient responsive sauf la bar de navigation , il prend un espace a droit , Voila une capture d’écran et le code :  

<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
    <div class="container">

      <div class="navbar-header">
        <span href="" class="icon_btn"></span>
        <a class="navbar-brand" href="#home">Ous Amine</a>
      </div>


        <div class="collapse navbar-collapse" id="navMain">
          <nav class="menu">
          <ul class="nav navbar-nav pull-right">
            <li><a class="coollink"  href="#home">Home</a></li>
            <li><a class="coollink" href="#about">About me</a></li>
            <li><a class="coollink"  href="#service">Service</a></li>
            <li><a class="coollink"  href="#skills1">Skills</a></li>
            <li><a class="coollink"  href="#portfolio">Work</a></li>
            <li><a class="coollink"  href="#footer">Contact</a></li>
          </ul>
          </nav>
        </div>
    </div>
  </div>

.opaque-navbar {
    background-color: transparent;
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
		width: 100%;
    height: 80px;
		padding: 20px 15px 20px 15px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}

.opaque-navbar.opaque {
    background-color: rgba(12, 19, 38, 0.9);
		width: auto;
    height: 80px;
		padding: 20px 15px 20px 15px;
		margin-bottom: 20px;
    transition: background-color .5s ease 0s;
    box-shadow: 0 2px 5px 0 rgba(247, 247, 247,.26), 0 2px 10px 0 rgba(247, 247, 247,.3);
}

.navbar-inverse .navbar-brand {
    color: #F7F7F7;
		font-size: 30px;
		font-family: 'Kaushan Script', cursive;
}

/*Style responsive*/
.opaque-navbar.opaque
  {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .navbar-header
  {
    height: 100%;
  }

  .navbar-brand
  {
    position: fixed;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

Merci pour m'aider .

-
Edité par amineousaid19 20 janvier 2017 à 12:00:05

Salut,

Si tu utilises bootstrap, alors tu dois t'y tenir. Ton menu n'est pas un menu bootstrap, les classes ne correspondent pas, il manque des éléments...

https://getbootstrap.com/components/#navbar

Il faut aussi que tu aies bien importé jQuery et le javascript de bootstrap pour que cela fonctionne.

Dernière chose : enlève les width: 100%; https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/