This widget will display a line of text links reflecting the users current status on your website.
Use
To use this widget, simply insert the following DIV as HTML in your page design (there is no WordPress short code).
<div id="MBB_RegisterLinks"></div>
NOTE: You may also deploy this as a <span>
Examples
If the lead is NOT logged in, this displays as:
Register | Login
If the lead IS logged in then it displays as:
My Account | Logout
Suggested Use
It's quite common for all of us to recognize that a website holds a service that we can access by seeing the "Login | Register" link on the top right of a web page!
So, this widget makes it possible to display such a text links and broadcast the services in your website.
Simply place the html <div> code in your webpage header.
Notes for WordPress Menus
Sometimes it's not possible to add this to a header and you may wish to add to your site menu anyway as shown here:
To do this, you'll need to be able adjust the Menu and add some custom CSS.
First, edit your menu and add a Custom Link menu item with the following:
- Set Link URL to be: #
- Set the Link Text to be:
<span id="MBB_RegisterLinks"></span>
Click "Add to menu".
Then edit the menu item
- Delete # from the URL field
- Add in MBB_RegisterLInks to the CSS Classes field
It should now look like this:
Make sure you SAVE THE MENU
When you look at the Menu on your website it's probably going to look badly formatted. So you'll need to inspect the generated code and apply CSS to make it display correctly, which will be unique to your website theme.
For example, in the website highlighted above, we had to add the following CSS. Note this is VERY SPECIFIC and meant as an example only. You will need to create custom CSS for your own menu.
/* remove the hover white background on the <li> */
.site-header .genesis-nav-menu li.MBB_RegisterLinks > a:hover {
background-color:transparent;
}/* Correct the padding and ensure display-inline or inherit in this case */
.site-header .genesis-nav-menu li a {
padding: 32px 10px;
display: inherit;
}/* Ensure the second level <a> tags for this widget are given the right color */
.genesis-nav-menu li a:hover a {
color: #ffffff;
}/* Ensure the second level hover has the right background effect */
.genesis-nav-menu li a:hover a:hover {
background-color: #ffffff;
}