it-swarm.com.de

Wordpress fügt meinem benutzerdefinierten Menü Ränder und Abstände hinzu?

Ich habe WordPress auf meinem Computer installiert, damit ich lernen kann, benutzerdefinierte Designs zu erstellen und diese lokal zu testen. Momentan spiele ich mit einem vorgefertigten Code aus einem Tutorial, damit ich mich besser mit WordPress-Codex vertraut machen kann.

Ich habe jedoch einige Probleme beim Anpassen meiner Navigation/meines Menüs. Ich benutze wp_nav_menu, um meine Links hinzuzufügen, aber aus irgendeinem Grund wird beim Aktualisieren meiner Seite zusätzlicher Platz am unteren Rand der Leiste (es ist ein horizontales Menü) sowie direkt links von den Links hinzugefügt. Als ich das Element in Google Chrome überprüft habe, verweist es auf ein ul-Tag mit einer zusätzlichen ID und Klasse, die WordPress hinzugefügt zu haben scheint.

Ich habe ein bisschen gegoogelt, um das Problem herauszufinden, und der Konsens scheint zu sein, dass all die zusätzlichen Klassen und IDs, die WordPress zum Menü hinzufügt, sich nicht auf das Styling auswirken sollten und nur für den Fall, dass Sie es möchten um sie anzupassen.

 problem menu 

Hier ist der Code für das Menü in meiner header.php-Datei:

<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>

Hier ist der CSS-Code:

.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;

}

So sieht der Code aus, wenn ich ihn auf Chrome überprüfe:

   <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>

Eine andere Sache, die mir aufgefallen ist, ist, dass wenn ich die PHP für das Menü mit ersetzen

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

alles sieht so aus, wie es sein sollte, außer das Caret, das unter aktiven Links angezeigt werden soll, fehlt (ein weiteres Problem, das ich bekommen werde, nachdem dies behoben ist)

 proper menu 

Irgendwelche Ideen?

1
reg

Der linke Abstand ist der Standardwert von 40 Pixel, der vom Browser zu einer ul hinzugefügt wird. Wenn ich WP Menüs gestalte, stelle ich damit sicher, dass alle Browser zufrieden sind:

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