Hey Mike, welcome to Beans Community 🙂
It is a bit difficult to give you an accurate answer without seing how you add your menu in your callback but if you are using wp_nav_menu() function, you may add 'beans_type' => 'navbar' to your arguments. Beans as 3 types of menu, navbar, sidenav (used in the Core Menu Widget) and offcanvas. So in your footer callback you could do:
wp_nav_menu( array(
'beans_type' => 'navbar',
// Your other arguments...
) );This will automatically add the necessary UIkit classes. Refer to wp_nav_menu() documentation regarding the other WP arguments available.
Hope that helps,
Hi Thierry, thanks for the fast answer.
Here is the code I would like to output:
<div class="uk-grid uk-text-small" data-uk-grid-margin>
<div class="uk-width-large-1-2">
<p class="uk-text-muted"><!-- Trade Marks --></p>
</div>
<div class="uk-width-large-1-2">
<!-- For large devices we want the menu to be right aligned -->
<div class="uk-align-right uk-visible-large">
<!-- Footer Nav -->
<ul class="uk-subnav uk-subnav-line">
<li><a href="tac.php" title="Terms of Use">Terms of Use</a></li>
<li><a href="privacy.php" title="Privacy Policy">Updated Privacy Policy</a></li>
<li><a href="contact.php" title="Contact">Contact</a></li>
<!-- Language Dropdown Nav -->
<li data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
<a href="#" title="Language">Language: English <i class="uk-icon-caret-down"></i></a>
<div class="uk-dropdown uk-dropdown-up uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a href="http://fr.example.com" title="Français"><img src="France_Flag.png" alt="Français" width="28" height="28"> Français</a></li>
<li class="uk-nav-divider"></li>
<li><a href="http://de.example.com" title="Deutsch"><img src="Germany_Flag.png" alt="Deutsch" width="28" height="28"> Deutsch</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a href="http://example.com" title="English"><img src="English_Flag.png" alt="English" width="28" height="28"> English</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- For small devices we do not want the menu to be right aligned -->
<div class="uk-hidden-large">
<!-- Footer Nav -->
<ul class="uk-subnav uk-subnav-line">
<li><a href="tac.php" title="Terms of Use">Terms of Use</a></li>
<li><a href="privacy.php" title="Privacy Policy">Updated Privacy Policy</a></li>
<li><a href="contact.php" title="Contact">Contact</a></li>
<!-- Language Dropdown Nav -->
<li data-uk-dropdown="{mode:'click'}" aria-haspopup="true" aria-expanded="false">
<a href="#" title="Language">Language: English <i class="uk-icon-caret-down"></i></a>
<div class="uk-dropdown uk-dropdown-up uk-dropdown-small">
<ul class="uk-nav uk-nav-dropdown">
<li><a href="http://fr.example.com" title="Français"><img src="France_Flag.png" alt="Français" width="28" height="28"> Français</a></li>
<li class="uk-nav-divider"></li>
<li><a href="http://de.example.com" title="Deutsch"><img src="Germany_Flag.png" alt="Deutsch" width="28" height="28"> Deutsch</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a href="http://example.com" title="English"><img src="English_Flag.png" alt="English" width="28" height="28"> English</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>I if I insert the code above it works perfectly fine but what's the point of implementing a dynamic website if every time a link is modified it should be edited in the functions.php
This is what I've made so far...
// New Footer Menu
function register_my_menu() {
register_nav_menu( 'footer-menu',__( 'Footer Menu' ) );
}
add_action( 'init', 'register_my_menu' );
// Overwrite the footer content.
beans_modify_action_callback( 'beans_footer_content', 'beans_child_footer_content' );
function beans_child_footer_content() {
?>
<div class="uk-grid uk-text-small" data-uk-grid-margin>
<div class="uk-width-large-1-2">
<p class="uk-text-muted"><!-- Trade Marks --></p>
</div>
<div class="uk-width-large-1-2 uk-clearfix">
<!-- For large devices we want the menu to be right aligned -->
<?php
wp_nav_menu( array(
'menu' => 'Footer Menu',
'menu_class' => 'uk-subnav uk-subnav-line',
'container' => 'div',
'container_class' => 'uk-align-right uk-visible-large',
'echo' => true,
'fallback_cb' => false,
'theme_location' => 'footer-menu'
) );
?>
<!-- For small devices we do not want the menu to be right aligned -->
<?php
wp_nav_menu( array(
'menu' => 'Footer Menu',
'menu_class' => 'uk-subnav uk-subnav-line',
'container' => 'div',
'container_class' => 'uk-hidden-large',
'echo' => true,
'fallback_cb' => false,
'theme_location' => 'footer-menu'
) );
?>
</div>
</div>
<?php
}I didn't manage to insert the Language Dropdown Nav. Any suggestions ?
Thanks again for the fast response and keep up the excellent work! Uikit Framework is my favourite and Beans as far as I used it, is pretty great.
Hi Mike,
Great job so far. I would suggest not to use twice wp_nav_menu() (unecessary memory usage) if the purpose is only to change the container_class. Instead I would replace all container classes with uk-align-medium-right which would align it right from medium breakpoint and higher. If you really need to have it from large breakpoint, I'd write a custom utility class tm-align-large-right and add the following in your style.less
@media (min-width: @breakpoint-large) {
.uk-align-medium-right {
float: right;
}
}Regarding your menu style (dropdown etc.), as I mentioned in my previous answer I'd suggest to add 'beans_type' => 'navbar' in your wp_nav_menu() arguments as follow (I removed unnecessary arguments set by default):
wp_nav_menu( array(
'menu' => 'Footer Menu',
'menu_class' => 'uk-subnav uk-subnav-line',
'container' => 'div',
'container_class' => 'uk-align-medium-right', // Or custom tm-align-large-right class.
'theme_location' => 'footer-menu',
'beans_type' => 'navbar'
) ); Happy coding,
Hello Thierry,
Thanks for the quick response. Worked like a charm. Also the css class was great... I don't realize how I didn't thought of that until now.