[Support request] Elements Generate-Menu_Bar_Item Not Working As Navigation Link

[Michelle]

My Element block hook generate_menu_bar_item isn’t working like I need it to. This menu item, a “Login/Logout” button, functions within my primary menu to change from login to logout, and vice versa to reflect when a user is logged in or logged out. When added as a generate_menu_bar_item, it only shows “Logout”, and doesn’t ever change to “Login”. On mobile, it doesn’t even log me out when I click it.

How can I style the primary menu button to replace and look like the element block hook generate_menu_bar_item?

Or, how can I fix this non-functional element block hook generate_menu_bar_item?

[Ying]

Hi Michelle,

Is this function added by a plugin?

If so, I would suggest reaching out to the plugin support for how to use the function in a WP button.

GP’s hook just offers a space to insert the content, but it doesn’t interfere with the content itself.

[Michelle]

Yes, this is a function added by a plugin, however, it works in the primary menu. I have it working on several other sites. What I need to do is make the primary menu show (it only has this menu item).

If I unpublish the Block Hook Element, how can I get the primary menu to show?

Here is the CSS I am using:

/*Styles login-logout nav item to look like a button*/
.menu-bar-items ul li.login-logout a {
  font-size:11px;
  padding: 8px;
  background-color: #b80000;
  color: #ffffff;
	border-radius: 5px;
  line-height: 8px;
	margin: 10px 10;
}

/*Center the site logo in navigation*/
@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(1) {
        margin-left: auto;
    }
}

/*Move hamburger menu to the left side*/
.main-navigation .menu-bar-items,
#mobile-header .menu-toggle {
    order: -1;
}
#mobile-header .menu-toggle {
    padding-left: 30px;
}

/*Makes Login-Logout button show to the right of Site Logo*/
.menu-bar-items .wp-block-navigation__container{
    display: block;
}
.site-logo {
    position:absolute;
    left: 50%;
    top: 50%;
    transform:translate(-65%,-50%);
}

[Ying]

If I unpublish the Block Hook Element, how can I get the primary menu to show?

Your current mobile breaking point is set to 2000, try setting it to 0, so the primary menu won’t turn into a hamburg.

[Michelle]

I don’t want to lose the hamburger menu though. Is there a way I can keep it still? I’m using it for an Off Canvas Menu with other widgets and custom links.

[Fernando]

Hi Michelle,

I see. Try this CSS:

div#mobile-menu > ul.menu{
    display: flex;
}

div#mobile-menu.main-nav {
    flex: unset;
}

[Michelle]

Thank you. That made it show. I added

padding-right: 60px to align it with the content margins.

I hope this is the right way to do it.

[Fernando]

In Additional CSS, you have this code:

.login-logout {
  position: -webkit-sticky;
  position: sticky;
  line-height: 0px;
  left: 20px;
}

Can you try removing it, and replacing it with this:

.login-logout {
    padding-right: 30px
}

[Author]

Posts