Menü in Template platzieren (Bootstrap)

B_K

Hallo,

das ich Anfänger bin muss ich nicht explizit erwähnen..wird sich im Folgenden zeigen.

Ich arbeite mich mittels des Buches "WordPress-Themes entwickeln" webwärts allerdings komme ich mit diesem Punkt nicht weiter:

Menü erstellen: OK
Menüort registrieren in function.php: OK
Menü zuweisen: OK
Menüorte im Template platzieren: klappt nicht

Meine header.php sieht so aus:

PHP

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title><?php bloginfo('name'); ?> </title> <?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo('description'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();
        ?>/style.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">


        <script src="<?php echo get_stylesheet_directory_uri(); ?>
        /js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    </head>
    <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <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="<?php bloginfo('url'); ?>"><?php bloginfo('name') ?></a>
        </div>
        
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">

Alles anzeigen

Nur weiß ich nun nicht recht diese Funktion einzubinden:

PHP

<?php
wp_nav_menu( array(
'theme_location' => 'haupt-menu',
'menu_class' => 'nav' ) );
?>

Dass heißt "Seite A", "Seite B", "Seite C" sollen als Reiter neben der Hauptseite horizontal zu liegen kommen wie in diesem Screenie:

Vielen Dank für Tipps/Tricks vorab
Bernd

[HR][/HR]WordPress Version 4.1

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

müsste mMn ja im <div id="navbar" class="navbar-collapse collapse"> Platz finden.

PHP

<div class="collapse navbar-collapse">
      <?php
			wp_nav_menu(array(
				'theme_location' => 'haupt-menu',
				'depth'		 => 0,
				'container'	 => false,
				'menu_class'	 => 'nav navbar-nav',
				'walker'	 => new BootstrapNavMenuWalker()
			);
			);
      ?>
      </div>

Alles anzeigen

Hast du denn auch einen Bootstrap Menu Walker (musst du dir einen passenden suchen)?

B_K

He Max,

vielen Dank, hat geklappt soweit.

Allerdings hat sich die form-group nun unter die Menüleiste gesetzt..Kann ich deren Position über die header.php beinflussen oder gehört das zur style.css?

Und falls gleich eine Antwort ersichtlich: Wenn das Browserfenster verkleinert wird, verschwindet auch die Navigation?!

Wo könnte ich diesbezüglich dran arbeiten?

header.php

PHP

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <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="<?php bloginfo('url'); ?>"><?php bloginfo('name') ?></a>
        </div>
        
        <div id="navbar" class="navbar-collapse collapse">
            <div class="collapse navbar-collapse">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'haupt-menu',
                'depth'         => 1,
                'container'     => false,
                'menu_class'     => 'nav navbar-nav',
                'walker'     => new wp_bootstrap_navwalker())
            );
            ?>
            </div>
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

Alles anzeigen

Danke euch
Bernd

B_K

So..
habe mir die Container nun farbig umrandet, was eine bessere Übericht zur Folge hat. Konnte meine Menüs entsprechend gut zuordnen:- ]
Danke
BK

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menü in Template platzieren (Bootstrap)

Jetzt mitmachen!

Benutzer online in diesem Thema