I tried to add classes in ul li and a how to add classes on ul and li if using html5blank templates at html5blank_nav ().
how to add classes on ul and li if using html5blank templates at html5blank_nav()?
I use html5blank theme too.
If you open the functions.php file you will find this
function html5blank_nav() {
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => ''
)
);
}
Then you can edit the way is calling the wp_nav_menu to add class to the ul.
To add styles to the li you must go to wordpress admin and edit the menu
Go to admin > appearance > menu
Click on Screen Options (top right of the screen)
Check the CSS classes options in the “Show advanced menu properties” panel
Add your css classes to the element
I hope that's what you need
Related
I create an element but textarea_html container image overflowed. Help me fix error.
Image overflows
code param teaxtarea_html
array(
'type' => 'textarea_html',
'holder' => 'div',
'heading' => __( 'Text', 'japan-language' ),
'param_name' => 'content',
'value' => __( 'Default value', 'japan-language' ),
'description' => __( 'Box Text', 'japan-language' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
)
My Select2 control is inside column with bootstrap class 'col-sm-3'. Also it is attached to form field. But width does not want to be 100% of parent column. If I make browser window smaller (after columns auto-rearangment) Select2 follows width of the parent column. Also if I specify width in px it changes the width. What could be a problem? Same story for form->field->textInput. Also I found the field width does not follow parent column width if the form is inline.
<?= $form->field($model, 'categories')->widget(Select2::className(), [
'data' => Category::availableCategories(),
'model' => $model,
'attribute' => 'categories',
'theme' => Select2::THEME_KRAJEE,
'size' => Select2::MEDIUM,
'showToggleAll' => false,
'language' => 'en',
'options' => ['placeholder' => 'Select a category...', 'id' => 'myselect'],
'pluginOptions' => [
'allowClear' => true,
'multiple' => true,
'width' => '200px',
],
])
?>
I had inline layout in my form. This was a problem.
The default wordpress HTML output for nav
is ul tag and li tag...
I want to use my custom nav. For example
<nav class="nav">
About Us
News
Departments
Contact
</nav>
Wordpress has some default args for the menu that you can change
<?php
$args = array(
'theme_location' => '',
'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>',
);
echo wp_nav_menu( $args );
?>
In the wp-includes/nav-menu-template.php file you can change even more things. But if you change code in the corefiles than it may be overwritten by future upgrades, so be carefull.
anyone knows how can i in Yii2 using the navbar widget make a hyperlink to a div that is above the 100% height screen and is hidden in order that the screen scrolls down to it?
The code i'm using for the navbar is the standard one that comes with yii in layout.php
['label' => 'Contact', 'url' => ['/site/contact']],
I substitute 'url' => ['/site/contact']], --> by something like 'url' => ['#divid']],
But it doesn't works.
Many thanks in advance for an answer.
Just specify url as a string:
['label' => 'Contact', 'url' => '#divId'],
Url parameter is processed by Url::to() method, you can see there how string is interpreted:
a normal string: it will be returned as is.
Thank you very much for your help, it works. I was trying to do this
<body data-spy="scroll" data-target="#navbar" data-offset="50">
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
//'brandLabel' => Yii::$app->name,
'brandLabel' => '<img src="SLOGAN.png" style="display:inline; vertical-align:top; margin-top:20px; margin-left: 10px;"/>',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar navbar-fixed-top navbar-inverse',
'id'=>'navbar'
],
]);
echo Nav::widget([
'options' => ['class' => 'nav navbar-nav navbar-left'],
'items' => [
['label' => 'HOME', 'url' => '#section1'],
['label' => 'ABOUT', 'url' => '#section2'],
['label' => 'SERVICES', 'url' =>'#section3'],
['label' => 'FAQS', 'url' => '#section4'],
['label' => 'CONTACTS', 'url' => '#section5'],
I am building a custom wordpress theme using html5blank and CDN bootstrap. I have taken the glorious bootstrap nav structure and made it my own. I am now trying to replace the <ul>'s
with my <?php html5blank_nav(); ?> which currently spits out my menus that are made in APPEARANCE > THEMES > MENUS via wordpress.
How do I integrate <?php html5blank_nav(); ?> or whatever is being generated inside of those tags to the bootstrap <ul> where the html would look like this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
/* WANT TO PUT MY WORDPRESS MENU HERE */
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
You can use this
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-right',
'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 );
?>