Weiss jemand von Euch, wo in diesem bootstrap Menu eingestellt wird, wann das normale Text Menü in den responsiven Modus switchen soll? Ziel ist es, dass immer das typische Icon angezeigt wird, egal, wie groß der Screen ist. Der Entwickler des verwendeten Themes kann es mir leider nicht sagen :)
Bin für jeden Ansatz dankbar.
Als Framework wird Redux verwendet.
bootstrap walker nav menu frage
-
-
- Gerade eben
- Anzeige
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)
-
Könnte man hier eventuell was umbiegen? Der Code wird für die Navi in der header.php aufgerufen:
ZitatAlles anzeigen<div class="col-xs-6 visible-xs">
<div class="oi_xs_menu">Menü <span class="fa fa-bars"></span></div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="oi_menu_content_holder">
<?php
if ( has_nav_menu( 'main_menu' ) ){
$walker = new OI_Walker;
wp_nav_menu(array(
'echo' => true,
'container' => '',
'theme_location' => 'main_menu',
'menu_class' => 'header_menu',
'walker' => $walker
));
} else { echo '<div class="alert alert-info" style="margin-top:-20px; margin-bottom:0px;"><strong>Set up your menu</strong><br> Appearance -> Menus -> Create your menu -> Choose it in "Theme Location" block</div>';}
?>
</div>
</div> -
Haben wir hier echt keine Bootstrap Profis oder ist die Frage zu doof/unklar? Die betreffende Seite ist nun auch erreichbar, es ist meine NEXIA MEDIA Seite, siehe links unten in der Signatur.
-
Falls Du den "wp_bootstrap_navwalker" von Edward McIntyre meinst. Der hat nichts damit zu tun. Der Breakpoint ist eine Eigenschaft von Bootstrap. Du findest ihn in der "variables.less" von Bootstrap.
Ich poste mal mein Template für die Menügenerierung:
PHP
Alles anzeigen<!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top tsbs-top-menu" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-top-collapse"> <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 echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a> </div> <div class="navbar-collapse collapse navbar-top-collapse"> <?php wp_nav_menu(array( 'theme_location' => 'top_menu', 'depth' => 2, 'container' => false, // 'container_class' => 'collapse navbar-collapse navbar-top-collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <?php if (is_user_logged_in()) : ?> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <span class="current-user"><?php $current_user = wp_get_current_user(); echo $current_user->display_name; ?></span> <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="<?php echo wp_logout_url(home_url()); ?>" title="Logout"><span class="glyphicon glyphicon-log-out"></span> <?php _e('Logout', 'bootstrapped'); ?></a></li> </ul> <?php else : ?> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="<?php echo wp_login_url(get_permalink()); ?>" title="Login"><span class="glyphicon glyphicon-log-in"></span> <?php _e('Login', 'bootstrapped'); ?></a></li> <li class="divider"></li> <li class="dropdown-header"><?php _e('get involved', 'bootstrapped'); ?></li> <li><a href="#"><a href="<?php echo wp_registration_url(); ?>" title="Register"><span class="glyphicon glyphicon-leaf"></span> <?php _e('Register', 'bootstrapped'); ?></a></li> </ul> <?php endif; ?> </li> </ul> <form id="searchform" class="navbar-form navbar-right" role="search" action="<?php echo esc_url(site_url()); ?>" method="get"> <div class="form-group"> <input id="s" name="s" type="text" class="form-control" placeholder="<?php esc_attr_e('Search …', 'bootstrapped'); ?>" value="<?php echo esc_attr(get_search_query()); ?>"> </div> <button id="searchsubmit" type="submit" name="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> </form> </div><!--/.nav-collapse --> </div> </div><!-- /Fixed navbar -->Du siehst, der navwalker wird einfach in statischen Markup eingeklinkt. Zugewiesene Icons werden hierbei in allen Ansichten vorangestellt, mobil wie Desktop.
-
leider existiert die variables.less nicht. Das theme baut auf dem Redux Frameset auf. in der header.php zu frickeln ist also viel zu spät?
-
Oh, das Theme kenne ich leider nicht. Da scheint jemand sehr ähnliches zu machen, wie ich derzeit. Hier scheint die Basis "Twentythirteen" zu sein :-)
Sollte aber egal sein. Auch wenn ein "statisches" Bootstrap vorgegeben sein sollte (also eines, bei dem die less-Files nach Bedarf nicht neu kompiliert werden), so basiert der Redux Navbar sicher auf einem ähnlichen Template. Der navwalker erzeugt lediglich die geschachtelten Listen. Wo genau dies geschieht, ist Theme-spezifisch.
Der Breakpoint steht trotzdem im css. Per default steht er auf @grid-float-breakpoint : @screen-sm-min; (@screen-sm-min = 768px). Sollte in dem Theme ein bereits kompiliertes BS genutzt werden, so wirst Du den Breakpoint wohl nicht einfach verändert bekommen. Hier kann nur der Theme Entwickler helfen.
Ein Ansatz könnte sein, ein vorher mit anderem Breakpoint neu kompliertes Bootstrap in das Theme einzumogeln. Dazu müsste man wohl aber tiefer eindringen.
-
ein guter Tipp!
über den grid-float-breakpoint hab ich in der bootstrap.css.map das Folgende gefunden:Zitatgrid-float-breakpoint-max: (@grid-float-breakpoint - 1);\n\n\n//== Container sizes\n//\n//## Define the maximum width of `.container` for different screen sizes.\n\n// Small screen / tablet\n@container-tablet: ((720px + @grid-gutter-width));\n//** For `@screen-sm-min` and up.\n@container-sm: @container-tablet;\n\n// Medium screen / desktop\n@container-desktop: ((940px + @grid-gutter-width));\n//** For `@screen-md-min` and up.\n@container-md: @container-desktop;\n\n// Large screen / wide desktop\n@container-large-desktop: ((1140px + @grid-gutter-width));
Werde gleich mal testen, was passiert, wenn ich die Werte alle auf 1.860 setze... :)
-
nichts passiert... :( hab in der redux.css auch aus 720px 1680px gemacht aber ohne Wirkung. Das ist schon haarsträubend, dass da nix passiert...
-
Nein, nein - so geht das nicht. Bootstrap basiert auf Less, und Less bringt Variable in css. Der Breakpoint ist solch eine Less-Variable. Compiliert man Bootstrap, entweder mit einem dafür vorgesehenen Paket (js oder php) ODER mittels des direkt auf der Bootstrap Site verfügbaren Customizer (http://getbootstrap.com/customize/), so wird aus Variablen und dem css Basiscode das endgültige Bootstrap.
Für einen Test solltest Du den Breakpoint im Customizer ändern - aber natürlich nur den, der für den Collapse des Menüs zuständig ist. Änderst Du den Breakpoint generell, so verlierst Du fast alle sinnvollen Eigenschaften von BS.
Für ein schnelles Verständnis von Less sind die Sourcefiles (*.less) hilfreich. Die sind Teil jedes Bootstrap Downloads. Für Dich relevant dürfte navbar.less sein.
-
hatte die beiden Dateien natürlich separat gespeichert und dann hochgeladen. Bisher läuft trotz dieser massiven Änderungen alles zufriedenstellend. Gehe davon aus, dass ledigglich die kompilierten Files aktiv/vorhanden sind. deshalb habe ich z.b. keine navbar.less usw. Werde wohl mit der status quo leben müssen...shit.
-
Du musst Dir lediglich einmal Bootstrap von der offiziellen Quelle downloaden. Dann hast Du alle Less Files. Alternativ nutze den BS-Customizer (mit verändertem Breakpoint für den navbar).
Schief gehen kann's nur, wenn der Theme-Ersteller eigene Less Files einkompiliert hat. Das kann man aber durch einen Vergleich zweier Versionen herausfinden.
-
kurioserweise hat der Entwickler mitgeteilt, dass es nach einem Bug aussieht und er im nächsten upgrade was korrigieren will. Sehe da zwar nicht wirklich einen Bug, aber ich warte mal ab, was er in den kommenden Tagen liefert (wenn er was liefert :) )
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!