Styling of Navigation Menu WP for Guest vs. Logged In User - php

I have a problem with a Wordpress website I'm creating for a church. They'd like a seperate part only their members can see. I installed the plug-in WP-Members and created two menus, one for guests (not-logged-in-users) and for users (logged-in-users). I put in some code into the header.php, telling it to show logged-in-users one menu and not-logged-in-users the other. So far so good.
Problem is that the styling changes when a user logs in. A not-logged-in-user sees the navigation menu the way it is supposed to be. When a user logs in, the sub-indicators disappear, auto width doesn't work and the slider, just beneath the navigation menu also magically stops working. This makes me believe it might be a conflict with two plug-ins, or something like that
Code i used to show guest one menu and users the other:
<div id="navigation" class="clearfix">
<?php
if ( is_user_logged_in() ) {
wp_nav_menu( array(
'theme_location' => 'main nav',
'menu' => 'logged-in-menu',
'sort_column' => 'menu_order',
'menu_class' => 'sf-menu sf-js-enabled sf-shadow',
'fallback_cb' => 'default_menu'
));
} else {
wp_nav_menu( array(
'theme_location' => 'main nav',
'menu' => 'logged-out-menu',
'sort_column' => 'menu_order',
'menu_class' => 'sf-menu sf-js-enabled sf-shadow',
'fallback_cb' => 'default_menu'
));
}
?>
</div>
The website is www.vineyardkollumerzwaag.nl/nieuw/
Username: Test
Password: test

When logged in I'm seeing a JavaScript error coming from the script /wp-content/mu-plugins/notes/admin-bar-rest.js - the error is that an Object does not have the method 'on'
Looking a bit closer, you are including jQuery version 1.6.2, .on() was added to jQuery in version 1.7 - try updating the version of jQuery included in your site to 1.7+ and that should fix the issue

Related

wordpress wp menu in home page and inner page

My main wp_nav_menu is called header-menu
and that menu like this
Home
About
Insight
Test 1
Test 1
About 2
Test
Test
I want to call this menu in home page without showing sub items . That can i do using
<?php
wp_nav_menu( array(
'menu_class' => 'main-nav navbar-nav ml-auto',
'container' => false,
'theme_location' => 'header-menu',
'depth' => 1,
) );
?>
But after when i go to the Insight page i want to show secondary main menu and secondary menu (only test1 and test2) How can i do this
Create a new menu and conditionally call in home page , that would be easy solution

Why aren't the links in my sidenav working?

I've been working on a wordpress theme using the materializecss framework. I can't get the links in the sidenav to work, the sidenav will slide out no problem but the links don't work. Below is a link to the c9.io box.
https://loftymaterial-chubbymaus.c9users.io/
here is the code for the sidenav
<?php wp_nav_menu( array(
'theme_location' => 'mobilemenu',
'menu_class' => 'side-nav',
'menu_id' => 'nav-mobile'
));?>
<i class="material-icons">menu</i>
and this is how the mobilemenu is registered
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'loftymaterial' ),
'mobilemenu' => __( 'Mobile Menu', 'loftymaterial' )
) );
any thoughts you have are greatly appreciated. Thanks
Issue is because of the #sidenav-overlay element, it is positioned on top of the side menu, use the below CSS, make sure to put it in a CSS file which loads after the materialize.css file
#sidenav-overlay{
z-index: 996;
}

Wordpress menus

i m having a problem with menus.
I had a template that wasnt originaly for WP.
so i integrated it.
when i started the site there was only one menu which works great.
i added <?php wp_nav_menu('primary'); ?> and its all ok
Now i need to add another one (custom links in the header section)
sooo i used this method
register_nav_menus( array(
'header' => 'Header menu',
'footer' => 'Footer menu'
) );
and recieved new locations for menus.
for the second menu i added
<?php wp_nav_menu( array( 'theme_location' => 'header', 'menu_class' => 'nav-menu', 'fallback_cb' => false ) ); ?>
now the problem:
there is a primary menu (it has few items)
and the custom menu ( its currently empty)
when i add new page to custom menu its being shown in both primary and custom menus.
if i delete all the items from custom menu, primary menu items are back in place...
what is the problem?
Thank you.
If I understand correctly, it looks like you are pointing to the wrong registered menu in the wp_nav_menu(). Specifically in the theme_location.
When you are building the "second menu" which is the "footer", theme_location should be footer since that is the name you gave it in the register_nav_menus().
<?php wp_nav_menu(
array( 'theme_location' => 'footer', // Change 'header' to 'footer'
'menu_class' => 'nav-menu',
'fallback_cb' => false )
);
?>

Wordpress navigation Twitter bootstrap customization

I have been trying to theme my navigation to use the twitter bootstrap. I want it to look like the demo example of a fixed top banner as seen here http://getbootstrap.com/examples/navbar-fixed-top/
I have got it working but I do not like the way I have got it working!
wp_nav_menu(
array(
'container_class' => 'main-nav navbar-collapse collapse',
'theme_location' => 'primary',
)
);
The code above builds my navigation, as you can see besides the default I have added navbar-collapse and collapse so it styles it according to bootstrap. This is not really the issue. The issue is when this piece of code then generates the menu I do not know how to add a class to the UL it creates so below is how I have done it.
$(document).ready(function(){
if($("#menu-menu-1").length !== 0){
$(".menu").addClass("nav navbar-nav");
} else {
alert("no navigation system");
}
});
This works by detecting the UL when the code has made it because it has an id of #menu-menu-1 then it adds the necessary classes and it all works.
Finally the question!
Is there a way to do this more efficiently because this method is very Quick Fix style and doesn't seem like a trustworthy permanent method. the alert was just there for testing purposes so I knew if the script was running
wp_nav_menu() has options for both menu_id and menu_class. To add both to your menu, you would do something like the following:
$menu_args = array(
'theme_location' => 'primary',
'container_class' => 'main-nav navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
'menu_id' => 'menu-menu-1'
);
wp_nav_menu( $menu_args );

Need to customize the top menu in woothemes canvas, depending if the user is logged in or not I need to show 1 menu instead of the other

I've already created a canvas child-theme. I added my custom page woo-hooks.class.php in the canvas-child folder in which i copied all the code from the original and added here:
$this->hooks['header'] = array(
'woo_top' => array(
'content' => '',
'shortcodes' => 0,
'php' =>'
the following code:
if ( is_user_logged_in() ) {
wp_nav_menu( array( "theme_location" => "top-menu-loggedin" ) );
} else {
wp_nav_menu( array( "theme_location" => "top-menu-loggedout" ) );
}
the code is like it doesn't even exists, I know I've probably mistaken what I have to do, but i couldn't find a clear guide anywhere on how to do this, just some code in some forums with no context about how and where to act (the code i added I found it in a forum, but I guess i didn't add it in the right place). The filter and hooks guides of WP don't make clear WHERE and HOW to call the custom filters and hooks and how to actually make them interact with the existing code... I'm going nuts, please help.
Top menu customization can be performed in header section, that is in child theme's 'header.php' file or in other file, specifying 'theme-location' parameter.
You can write below code, in your child theme,
if (is_user_logged_in()){
wp_nav_menu(array(
'menu_class' => 'member-menu',
'menu' => 'Members',
'theme_location' => 'primary');
);
}else{
wp_nav_menu(array(
'menu_class' => 'top-menu',
'menu' => 'Members non Logged in',
'theme_location' => 'primary')
);
}
Here, 'theme-location' parameter is specifies location of Menu and 'menu' specifies name of Menu.

Categories