I use yii with adminLTE from this git, dmstr.
So, I copied the layout from example-view's folder to my view/layout
My question is
How to make the navbar is fixed
The sidebar is fixed , but can scrolled ?
This is my code :
navbar
<?php
use yii\helpers\Html;
/* #var $this \yii\web\View */
/* #var $content string */
?>
<header class="main-header">
<?= Html::a('<span class="logo-mini">TMS</span><span class="logo-lg">' . Yii::$app->name . '</span>', Yii::$app->homeUrl, ['class' => 'logo']) ?>
<nav class="navbar navbar-static-top" role="navigation">
//Some element
</nav>
</header>
sidebar
<aside class="main-sidebar">
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="<?= $directoryAsset ?>/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
</div>
<div class="pull-left info">
<p>Dzil Jalal</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<?=
dmstr\widgets\Menu::widget(
[
'options' => ['class' => 'sidebar-menu'],
'items' => [
['label' => 'Menu Yii2', 'options' => ['class' => 'header']],
['label' => 'Gii', 'icon' => 'fa fa-file-code-o', 'url' => ['/gii']],
['label' => 'Debug', 'icon' => 'fa fa-dashboard', 'url' => ['/debug']],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
[
'label' => 'Same tools',
'icon' => 'fa fa-share',
'url' => '#',
'items' => [
['label' => 'Gii', 'icon' => 'fa fa-file-code-o', 'url' => ['/gii'],],
['label' => 'Debug', 'icon' => 'fa fa-dashboard', 'url' => ['/debug'],],
[
'label' => 'Level One',
'icon' => 'fa fa-circle-o',
'url' => '#',
'items' => [
['label' => 'Level Two', 'icon' => 'fa fa-circle-o', 'url' => '#',],
[
'label' => 'Level Two',
'icon' => 'fa fa-circle-o',
'url' => '#',
'items' => [
['label' => 'Level Three', 'icon' => 'fa fa-circle-o', 'url' => '#',],
['label' => 'Level Three', 'icon' => 'fa fa-circle-o', 'url' => '#',],
],
],
],
],
],
],
],
]
)
?>
</section>
</aside>
For the help, it so appreciated
To make the navbar fixed, put
class="navbar navbar-fixed-top"
instead of
class="navbar navbar-static-top"
Related
I'm using for my symfony project the Ninsuo JqueryCollection plugin https://symfony-collection.fuz.org/symfony3/, and I have a form that has a collectionType, except that I want the targeted entity to appear with its own layout, but I do not know how to apply it to CollectionType
I have my "subform" like this
SubForm :
{{form_start(form)}}
<div class="card">
<h5 class="card-header">Nouvel utilisateur</h5>
<div class="card-body">
{{form_row(form.email)}}
<div class="row align-items-center">
<div class="col-md-4">
{{form_row(form.nom)}}
</div>
<div class="col-md-4">
{{form_row(form.prenom)}}
</div>
<div class="col-md-4">
{{form_row(form.service)}}
</div>
</div>
{{form_row(form.roles)}}
</div>
</div>
{{form_end(form)}}
And my main Form :
{{form_start(form)}}
{{form_row(form.utilisateurs, {'attr': {'class': 'my-selector jquery-buttons-collection mt-3'} })}}
<button type="submit" class="btn btn-primary">Enregistrer</button>
{{form_end(form)}}
I would like to apply the layout of the 1st form for my form.users. Someone would know how?
EDIT:
My main form :
$builder
->add('utilisateurs', CollectionType::class, [
'entry_type' => AdminUserRegistrationType::class,
'entry_options' => [
'label' => false,
],
'allow_add' => true,
'allow_delete' => true,
'delete_empty' => true,
'by_reference' => true,
'prototype' => true,
'label' => false,
'attr' => array(
'class' => 'my-selector',
'label' => false,
),
'by_reference' => false,
]);
;
With the template :
{{form_start(form)}}
{{form_row(form.utilisateurs, {'attr': {'class': 'my-selector jquery-buttons-collection mt-3'} })}}
<button type="submit" class="btn btn-primary">Enregistrer</button>
{{form_end(form)}}
The form.utilisateurs formType :
$builder
->add('nom', TextType::class)
->add('prenom', TextType::class)
->add('email', EmailType::class)
->add('service', EntityType::class, [
'class' => GroupeValidateurs::class,
'query_builder' => function (GroupeValidateursRepository $repo) {
return $repo->createQueryBuilder("g")
->orderBy("g.nom", 'ASC');
},
'choice_label' => 'nom',
'label' => "Service",
'placeholder' => 'Service'
])
->add('roles', ChoiceType::class, [
'label' => "Rôles",
'choices' => [
'Admin' => 'ROLE_ADMIN',
'Direction' => 'ROLE_DIRECTION',
'RH' => 'ROLE_RH',
],
"expanded" => true,
"multiple" => true,
])
;
And the form theme :
{% block utilisateursType_label %}{% endblock %}
{% block utilisateursType_errors %}{% endblock %}
{% block utilisateursType_widget %}
<div class="card">
<h5 class="card-header">Nouvel utilisateur</h5>
<div class="card-body">
{{form_widget(form.email)}}
<div class="row align-items-center">
<div class="col-md-4">
{{form_widget(form.nom)}}
</div>
<div class="col-md-4">
{{form_widget(form.prenom)}}
</div>
<div class="col-md-4">
{{form_widget(form.service)}}
</div>
</div>
{{form_widget(form.roles)}}
</div>
</div>
{% endblock %}
But I don't know how find the block name
I use Yii2 framework and I'm writing a navbar in layout/main.php. I have to use Uikit so I imported css and js files in my project, now the problem is that yii\bootstrap\NavBar seems not to be customizable and doesn't support uikit classes. Is there a way to use uk classes and span tag with yii navbar?
I have this HTML code:
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>
Parent
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active">Active</li>
<li><a href="#">Item
<span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
</a></li>
<li class="uk-nav-header">Header</li>
<li>Item</li>
<li>Item</li>
<li class="uk-nav-divider"></li>
<li>Item</li>
</ul>
</div>
</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
Parent
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active">Active</li>
<li>Item</li>
<li class="uk-nav-header">Header</li>
<li>Item</li>
<li>Item</li>
<li class="uk-nav-divider"></li>
<li>Item</li>
</ul>
</div>
</li>
</ul>
</div>
and this is the implementation with yii2 component:
NavBar::begin([
'brandLabel' => Html::img('/img/my_image.png'),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'uk-navbar navbar-fixed-top uk-align-center',
'style' => 'background-color: orange; color: black ; height: 100px;
margin-top: 0; margin-bottom: 0',
]
]);
$menuItems = [
['label' => 'Home', 'url' => Yii::$app->homeUrl],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right uk-link-reset',
'style' => 'color: white'
],
'items' => $menuItems,
]);
NavBar::end();
You need to include html options inside each individual item
$menuItems = [
['label' => 'Home', 'url' => Yii::$app->homeUrl],
[
'label' => 'Item <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>',
'encode' => false,
'url' => ['/item'],
'options' => ['class' => 'uk-active'],
],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']]
];
More details from the item documentation:
label: string, required, the nav item label.
url: optional, the item's URL. Defaults to "#".
visible: boolean, optional, whether this menu item is visible. Defaults to true.
linkOptions: array, optional, the HTML attributes of the item's link.
options: array, optional, the HTML attributes of the item container (LI).
active: boolean, optional, whether the item should be on active state or not.
dropDownOptions: array, optional, the HTML options that will passed to the yii\bootstrap\Dropdown widget.
items: array|string, optional, the configuration array for creating a yii\bootstrap\Dropdown widget, or a string representing the dropdown menu. Note that Bootstrap does not support sub-dropdown menus.
encode: boolean, optional, whether the label will be HTML-encoded. If set, supersedes the $encodeLabels option for only this item.
I'm trying to set different navigations in the footer on my wordpress page.
I've registered the different navs inside functions.php:
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'bootstrapcanvaswp' ),
'language' => __('Language Menu', 'bootstrapcanvaswp'),
'rassismus' => __('Footer Rassismus'),
'antisemitismus' => __('Footer Antisemitismus'),
'rassismusstrafnorm' => __('Footer Rassismusstrafnorm'),
'bildung' => __('Footer Bildung'),
'medien' => __('Footer Medien'),
'oeffentlichkeit' => __('Footer Öffentlichkeit'),
'gra' => __('Footer GRA'),
'meldetool' => __('Footer Meldetool')));
and inside my footer.php I've set the different navigations:
<div class="row seven-cols footer-nav">
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'rassismus',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'antisemitismus',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'rassismusstrafnorm',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'bildung',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'medien',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1">
<?php
wp_nav_menu( array(
'menu' => 'oeffentlichkeit',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
<div class="col-md-1 last-item">
<?php
wp_nav_menu( array(
'menu' => 'gra',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
<?php
wp_nav_menu( array(
'menu' => 'meldetool',
'container' => 'div',
'container_class' => 'footer-nav-compl'
));
?>
</div>
</div>
My problem is that some are working well an other not, they just display the nav of "Antisemitismus"
Working:
Antisemitismus
Rassismusstrafnorm
Bildung
Medien
Meldetool
GRA
Not working (displaying Antisemitismus)
Rassimus (first)
Oeffentlichkeit (second to last)
In the backend I've set all navigations to the right name and none of the navigations are empty...
Does anyone had a similar problem or knows something to help me?
Thank you very much
Use theme_location instead of name - name is reffering to the value of the array you send to register_nav_menus, not the key.
what i want to achieved is this
<div class="someclass"> // in place of <ul>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
<a class="item">Page Title</a>
.
.
.
</div>
This is the patter which is used by semantic UI for horizontal menu
I have achieved this much
<div class="ui secondary menu">
Services
Portfolio
Shop
</div>
by using code
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
But i want to add
class="item"
to
Services
Please guide..
thankx
Finally I able to do this..
<div id="menu1" class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
<script>
jQuery( "#menu1 a" ).addClass( "item" );
</script>
You can use 'menu_class'=> 'item'
Example:
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'top-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
Read the codex about function wp_nav_menu, you're using it wrong, do something like this:
echo strip_tags(wp_nav_menu(
'items_wrap' => '<div id="%1$s" class="%2$s">%3$s</div>',
'menu_class' => 'myclass ui',
'echo' => false,
), '<a>');
In wordpress admin > appereance > menus, you can define classes for each link. Just make sure you've turned it on at the screen options.
But you can also do something like this to add a class.
Thankx Fermolina for your answer unfortunately it give me this output which dosent work
Code use
<div class="ui secondary menu">
<?php
$menuParameters = array(
'menu' => 'test-menu',
'menu_class' => 'item',
'container' => false,
'echo' => false,
'items_wrap' => '%3$s',
'depth' => 0,
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' );
?>
</div>
OUTPUT no class in
<div class="ui secondary menu">
Home
</div>
I have a HTML coded navigation menu which has CSS style and cool animation.
Now i wants to add this CSS and structure in Word Press. I have tried and also used in wp_nav_menu() .But result is so far. How could i use this CSS in Word Press.
CSS also included and working fine if i am using statically navigation HTML.
$defaults = array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
);
wp_nav_menu( $defaults );
Wants to add this css in Wordpress navigation menu
<ul class="menu">
<li class="current-menu-parent">Home
<ul class="sub-menu">
<li class="current-menu-item">Background Color</li>
<li>Background Color With Fullwidth Slider</li>
<li>Clean Style</li>
<li>Clean Style With Fullwidth Slider</li>
<li>Background Image</li>
</ul>
</li>
<li>Pages
<ul class="sub-menu">
<li>About</li>
<li>Full Width</li>
<li>Gallery</li>
<li>404 Page</li>
<li>Sitemap</li>
</ul>
</li>
</ul>
Is not so dificult to do that. You need to declare the class of the menu in array.
here is an exemple:
<?php $defaults = array(
'theme_location' => '',
'menu' => 'TopMenu',
'container' => 'ul',
'container_class' => 'topmenu-{topmenu slug}-container',
'container_id' => 'topmenu',
'menu_class' => 'topmenu',
'menu_id' => 'topmenu-{topmenu slug}[-{increment}]',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
); ?>
<?php wp_nav_menu( $defaults ); ?>
In this "topmenu" is the css class. I believe that from here you will be able to customize your menu.
Hope it help's you!
If you need a css sample, just let me know!