Navar qui n'est plus responsive

Bonjour j'ai un gros prombleme je n'ai pas touché a mon code et ma navbar n'est plus responsive (les menu deroulant ne se rétréci plus en un seul menu) quand je reduit la page.

Voici mon code,

Merci d'avance.

<DOCTYPE html>
  <html lang="fr">
    <head>
      <meta charset="utf-8"/>
      <title>Arteva</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link rel="stylesheet" href="{{ base_url() }}/css/app.css">
    </head>
    <body>
      {% include 'templates/partials/navigation.twig' %}
      <div class="container">
        {% include 'templates/partials/flash.twig' %}
        {% block content %}{% endblock %}
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
  </html>

app.twig

body {
  padding-top: 80px;
  padding-bottom: 40px;
}

.navbar {
  background-color: #F7F9FB;
  border-color: transparent !important;
}

.navbar-nav li a {
  color: #131313 !important;
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
  background-color: #F7F9FB;
}

.btn.btn-primary {
  color: #FFFFFF !important;
  border: solid 1px #FFFFFF;
}

.navbar .navbar-brand {
  color: black;
}

.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
  color: black;
}

.panel-default .panel-heading{
  color: white;
background: black;
}

a
{
  color: black;
}

a:hover {
  color: blue;
  text-decoration:none;
}

app.css

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="{{ path_for('home')}}">Arteva</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav" id="menu-deroulant">
        {% if auth.check %}
          <li class="dropdown">
            <a href="{{ path_for('home')}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
            {% endif %}
          </ul>

        </li>
      </ul>
      <ul class="nav navbar-nav">
        <li><a href="{{ path_for('contact')}}">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        {% if auth.check %}
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ auth.user.name }}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="{{ path_for ('auth.password.change')}}">Change password</a>
              </li>
              <li>
                <a href="{{ path_for('auth.signout')}}">Sign out</a>
              </li>
            </ul>
          </li>
        {% else %}
          <li>
            <a href="{{ path_for('auth.signup')}}">Sign up</a>
          </li>
          <li>
            <a href="{{ path_for ('auth.signin')}}">Sign in</a>
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

navigation.twig

Anonyme

11 décembre 2017 à 9:43:47

11 décembre 2017 à 10:17:54

Bah tu fais pas de responsive dans ton css donc ça peut pas l'être.

Le responsive en css se déclare comme ceci :

@media only screen and (max-width:320px){

/* et là tu refais ton css avec les dimensions souhaités genre : */
nav{

}

Mewen_bzh

11 décembre 2017 à 10:47:43

Salut,

A première vue il utilise Bootstrap donc c'est ce dernier qui doit gérer le responsive de ses composants (sauf besoin précis pour overrider tel ou tel élement).

Ensuite, une fonctionnalité ne disparaît pas comme par enchantement. Il y a forcément eu une modification du code (volontaire ou suite à une mauvaise manip) à un endroit ou à un autre pour que cela cesse de fonctionner.

Par exemple je ne vois pas de balise <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans ton code, c'est normal ?

-
Edité par Mewen_bzh 11 décembre 2017 à 10:48:17

Je ne réponds pas aux messages privés.

11 décembre 2017 à 13:39:28

Oui c'est sans doutes ça ou alors c'est que sont code a été effectivement modifié.

EmmanuelBeziat

11 décembre 2017 à 15:41:18

En testant ton code sur jsfiddle, ça fonctionne: https://jsfiddle.net/f7zktf47/1/

Tu as un lien vers ton site, directement ?

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Navar qui n'est plus responsive

Supprimer

Modérer

Signaler le message aux modérateurs