Archived topic
Elements Generate-Menu_Bar_Item Not Working As Navigation Link
7 replies · Started by Michelle on August 17, 2022
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?
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.
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%);
}
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.
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.
Hi Michelle,
I see. Try this CSS:
div#mobile-menu > ul.menu{
display: flex;
}
div#mobile-menu.main-nav {
flex: unset;
}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.
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
}