Navigationsleiste mit Bootstrap behoben

Ich versuche, die Navigationsleiste in meinem untergeordneten Thema zu ändern, bin aber ein Neuling. Ich habe hier einige Fragen dazu gelesen und sogar die Bootstrap-Site gesehen, aber ich verstehe nicht, wie ich mein Problem lösen soll. Entschuldigung für meine Unwissenheit, aber kann mir jemand erklären, wie es funktioniert?

Ich verwende dieses Thema http://demos.codexcoder.com/#limo_wp und ich möchte die Navbar anstelle dieses “Blinkens” und Schwebens fixieren. Bleiben Sie einfach fixiert, nachdem Sie die Seite gescrollt haben.

Ein Beispiel finden Sie auf der Bootstrap-Website.

http://getbootstrap.com/examples/navbar-fixed-top/

Oder Sie können sich ändern

<section id="headnev" class="navbar topnavbar"> 

zu

<section id="headnev" class="navbar navbar-fixed-top">  

in Ihrer Header-Datei und entfernen Sie:

// Script for top Navigation Menu
    jQuery(window).bind('scroll', function () {
      if (jQuery(window).scrollTop() > 100) {
        jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
        jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
      } else {
        jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
        jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
      }
    });

aus custom.js

Der folgende Befehl:

Oben fixiert:
Addieren .navbar-fixed-top und beinhalten a .container oder .container-fluid um den Inhalt der Navigationsleiste zu zentrieren und aufzufüllen.

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        ...
    </div>
</nav>

Wenn Sie nach dem Scrollen der Seite zum festen Menü möchten. Sie verwenden fließenden Javascript-Code. In diesem Code-Festmenü wird nach if über ein bestimmtes Element gescrollt. Ich habe den folgenden Code basierend auf Ihrer Vorlage geschrieben.

<script>
    if ( $('body').scrollTop() > $('.section-a').position.top ) {
         $('#headnev').removeClass('topnavbar');
         $('#headnev').addClass('navbar-fixed-top');
     }
</script>

füge einfach ein hinzu class="nav navbar navbar-fixed-top"

Ich gebe Ihnen ein Beispiel für meinen Code, verwenden Sie ihn einfach und sehen Sie, wie er funktioniert.

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

            <div class="navbar-brand"><a href="nature.html">Project Nature</a></div>

            <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#"><a href="#">Plants</a></a></li>
                        <li><a href="#"><a href="#">Landscapes</a></a></li>
                        <li><a href="#"><a href="#">Animals</a></a></li>
                        <li><a href="#"><a href="#">Elements</a></a></li>
                    </ul>
                </li>

                <li><a href="#">Gallery</a></li>
                <li><a href="#">Blah</a></li>
                <li><a href="#contact" data-toggle="modal">Contact</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#"><a href="#">Twitter</a></a></li>
                        <li><a href="#"><a href="#">Facebook</a></a></li>
                        <li><a href="#"><a href="#">Google+</a></a></li>
                        <li><a href="#"><a href="#">LinkedIn</a></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


</div>

Dadurch wird eine Navigationsleiste mit einer Überschrift (Titel) und 5 Menüpunkten generiert, von denen 2 Dropdowns sind.

Grüße 🙂

Sie müssten einem untergeordneten Design etwas wie das folgende CSS hinzufügen, um dieses Verhalten im übergeordneten Design zu überschreiben.

#header .navbar {
    animation:none !important;
}

Wenn Sie mit untergeordneten Themen von WordPress nicht vertraut sind, Hier ist eine gute Ressource für Sie. Möglicherweise gibt es dafür sogar eine Themeneinstellung. Hängt davon ab, was der Designentwickler in den Optionen des Designs zur Verfügung gestellt hat.

In dem navbar divsollten Sie den Klassennamen hinzufügen .navbar-fixed-top.

Sie könnten auch mein CSS ausprobieren, einfach, aber effektiv, wenn Sie es immer oben positionieren

.navbar{
    position:fixed;
    width:100%;
    z-index: 1000000;
    top:0;
}