web-dev-qa-db-fra.com

Wordpress ajoute des marges et du remplissage à mon menu personnalisé?

J'ai installé wordpress sur mon ordinateur pour que je puisse apprendre à créer des thèmes personnalisés et à les tester localement. Actuellement, je joue avec du code pré-créé à partir d'un tutoriel afin de me familiariser davantage avec le codex wordpress.

Cependant, j'ai de la difficulté à personnaliser ma navigation/mon menu. J'utilise wp_nav_menu pour ajouter mes liens, mais pour une raison quelconque, lorsque je mets à jour ma page, de l'espace supplémentaire a été ajouté au bas de la barre (c'est un menu horizontal), ainsi que directement à gauche de l'ensemble des liens. Lorsque j'ai inspecté l'élément sur Google Chrome, il fait référence à une balise ul avec un ID supplémentaire et une classe que wordpress semble avoir ajoutée.

J'ai essayé un peu de googler pour essayer de comprendre le problème et le consensus semble être que toutes les classes et identifiants supplémentaires ajoutés par wordpress au menu ne devraient pas affecter le style et sont au cas où vous voudriez pour les personnaliser.

 problem menu 

Voici le code pour le menu dans mon fichier header.php:

<div class="blog-masthead">
  <div class="container">
    <nav class="blog-nav">
        <?php wp_nav_menu( array( 'menu' => 'empty menu', 'container_class' => '', 'walker' => new CSS_Menu_Walker() ) ); ?>
      </nav>
        </div>
</div>

Voici le code css:

.blog-masthead {
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
          box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}

/* Nav links */

.blog-nav li {
    position: relative;
    display: inline-block;
    padding: 10px;
    font-weight: 500;   
}
.blog-nav li a {
    color: #fff;
}

/* Active state gets a caret at the bottom */
.blog-nav .active {
  color: #fff;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;

}

Voici à quoi ressemble le code lorsque je l'inspecte sur chrome:

   <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
            <div class="menu-empty-menu-container"><ul id="menu-empty-menu" class="menu"><li id="menu-item-1798" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active"><a href="http://localhost/wordpress"><span>Home</span></a></li>
<li id="menu-item-1799" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/blog/"><span>Blog</span></a></li>
<li id="menu-item-1800" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/front-page/"><span>Front Page</span></a></li>
<li id="menu-item-1801" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/about/"><span>About The Tests</span></a></li>
<li id="menu-item-1802" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://localhost/wordpress/category/foo-parent/"><span>Foo Parent</span></a></li>
<li id="menu-item-1803" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://localhost/wordpress/category/foo-a/"><span>Foo A</span></a></li>
</ul></div>          </nav>
            </div>
    </div>

Une autre chose que j'ai remarquée est que si je remplace le php pour le menu avec

<?php wp_list_pages( '&title_li='); ?>

tout semble comme il se doit, sauf que le curseur inséré sous les liens actifs est manquant (un autre problème auquel je reviendrai une fois que cela aura été résolu)

 proper menu 

Des idées?

theme-developmentmenusnavigationcodex
1
reg

Le remplissage de gauche correspondra aux 40 pixels par défaut ajoutés à une valeur par le navigateur. Lorsque je stylise les menus WP, je l'utilise pour m'assurer que tous les navigateurs sont satisfaits:

.blog-nav li,
.blog-nav ul {
    padding: 0;
    margin: 0;
}
1
Andy Macaulay-Brook