0
votes

Comment changer la position de la barre de navigation BOOTSTRAP Menu de menu parent Icône d'icône sur la vue mobile?

Je cherche un moyen de modifier la position de l'icône de menu de menu de la barre Bootstrap Navigation Barre, em> lors de l'ouverture de la vue mobile.

Actuellement, l'en-tête de menu contient une icône de flèche droite. à la fin du nom d'en-tête comme ci-dessous. p>

Mon exigence est de convertir l'icône de flèche droite en surbrillance à gauche icône -arrer et modifier la position de l'icône au début du parent Texte du menu d'en-tête et aussi pour modifier la couleur de fond (gris) de l'élément de menu parent sur la souris survolez comme ci-dessous. p>

ci-dessous est la barre de menu de navigation HTML Code: P>

<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
    <li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;">
        <label class="label d-md-block d-lg-none">Welcome, abc</label>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACCOUNTS</a>
        <div class="dropdown-menu">
            <a class="dropdown-item"><span class="k-icon k-i-plus"></span>New Prospect</a>
            <a class="dropdown-item">Accounts</a>
            <a class="dropdown-item">Prospects</a>
            <a class="dropdown-item">Account Reports</a>
            <a class="dropdown-item">My Account Reports</a>
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTACTS</a>
        <div class="dropdown-menu">
            <a class="dropdown-item">Item 1</a>
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LEADS</a>
        <div class="dropdown-menu">         
            <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OPPORTUNITIES</a>
        <div class="dropdown-menu">
            <a class="dropdown-item">Item 1</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ACTIVITIES</a>
        <div class="dropdown-menu">
            <a class="dropdown-item">Item 1</a>
        </div>
    </li>
</ul>
</div>

html css bootstrap-4

0 commentaires

3 Réponses :

0
votes

J'ai exemple pour vous, c'est de l'aide pour vous

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  left: 10px;
  top: 14px;
  transform: rotate(180deg);
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  left: 10px;
}

0 commentaires

0
votes

Je pense que vous n'avez pas à écrire autant d'un code pour faire ce changement unique. Quelques étapes à suivre

1) Supprimez la classe Dropdown-Toggle car il s'agit du commandant de la flèche vers le bas pour apparaître.

2) Ajouter Fontawesome CDN ou quoi que ce soit d'autre pour les icônes de la flèche ou vous pouvez utiliser HTML Unicode

3) Ajouter des fontawesome appropriés juste à l'intérieur du bouton déroulant ou autre chose, vous pouvez également utiliser Icône d'image.

4) Pour le changement de couleur Si vous utilisez FontaweSome de l'icône de la base de polices, vous pouvez modifier la couleur ou l'icône aussi de la couleur: "n'importe quoi" et pour changer la couleur d'arrière-plan cibler simplement l'identifiant ou la classe et écrire de l'arrière-plan: "n'importe quoi"! important;

exemple de code :: xxx

espère que cette aide! Merci.

0 commentaires

2
votes

Vous pouvez utiliser des icônes de police géniales comme suggéré ci-dessous et créez l'effet similaire souhaité. Bootstrap crée l'icône du triangle à l'aide d'une propriété frontalière sur l'élément après l'ancre à bascule. Supprimer ce style en ajoutant la bordure : 0 aucune; code> et ajoutez les styles suivants à .dropdown-bascule code> xxx pré>

p>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://use.fontawesome.com/b71241fd62.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav">
      <li class="nav-item" style="background-color: #f5f5f5; height:33px; padding-top:8px;">
        <label class="label d-md-block d-lg-none">Welcome, abc</label>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ACCOUNTS</a>
        <div class="dropdown-menu">
          <a class="dropdown-item"><span class="k-icon k-i-plus"></span>New Prospect</a>
          <a class="dropdown-item">Accounts</a>
          <a class="dropdown-item">Prospects</a>
          <a class="dropdown-item">Account Reports</a>
          <a class="dropdown-item">My Account Reports</a>
          <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CONTACTS</a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Item 1</a>
          <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LEADS</a>
        <div class="dropdown-menu">
          <a class="dropdown-item"><span class="k-icon k-i-star"></span> Favorites</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OPPORTUNITIES</a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Item 1</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ACTIVITIES</a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Item 1</a>
        </div>
      </li>
    </ul>
  </div>

5 commentaires

Je pense que je n'ai pas été capable d'ajouter des exigences appropriées plus tôt. Veuillez vérifier que j'ai ajouté une mise à jour dans la question. Maquette vous aidera à comprendre mon exigence clairement. Merci!

S'il vous plaît vérifier ma réponse mise à jour et laissez-moi savoir si cela aide

Merci! Son travail pour la vue mobile maintenant. Mais, la vue de bureau peut également changer pourrait être parce que vous avez ajouté des cours de bootstrap de navigation supplémentaires dans votre exemple que j'ai copié. Regardez à la même personne s'il vous plaît voir l'image ci-jointe pour votre référence.

Il suffit d'ajouter mes styles dans la requête multimédia @Media Seul écran et (max-largeur: 992px) {}, il devrait faire le tour

Travailler, j'ai fait des changements dans l'ordre des éléments de classe. Merci!