[AlexanderKeymaster]

Hi GoWall,

What we’re working with here is considered custom development. As our support is free, we’re limited in how much we can help. We can provide general advice and direction, but it is up to you to implement the customization.

Could you clarify on what you mean by “crashing the site”? Please describe the behavior. If it’s a white screen, that usually means there is a fatal PHP error. Can you please enable WP_DEBUG mode? You can do this by opening wp-config.php and adding
define( 'WP_DEBUG' , true ); just above /* That's all, stop editing! Happy blogging. */ For example:

define('WP_DEBUG', true);

/* That's all, stop editing! Happy blogging. */

When you revisit the page with the white screen, you should have some error output describing the issue in more detail.

[GoWallParticipant]

So I finally got the button working! What sort of styling options do I have in php to adjust the following code that is in functions.php

if( ! function_exists('x_button_nav_item') ) {
function x_button_nav_item( $items, $args ) {

  if ( $args->theme_location == 'primary' ) {
    $items .= '<li class="menu-item x-menu-item x-menu-item-button"><span><a class="x-btn x-btn-red x-btn-real x-btn-square x-btn-mini" href="https://acceptance.gowall.com/#/login" title="Example">Log In</a></span></li>';
  }

  return $items;

}
add_filter( 'wp_nav_menu_items', 'x_button_nav_item', 10000, 2);
}

[ZeshanMember]

Hi there,

You can style the button using following CSS code under Custom > CSS in the Customizer:

.x-navbar .desktop .x-nav>li.x-menu-item-button .x-btn {
  /* Your custom CSS styling goes here */
}

Thanks!

[GoWallParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I tried to login to your wordpress dashboard but both /wp-admin and /wp-login return 404 error.
Please check it.

Thanks.

[GoWallParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

You can use this css code as we have given in our previous reply:

.x-navbar .desktop .x-nav>li.x-menu-item-button .x-btn {
  /* Your custom CSS styling goes here */
  padding: 5px;
}

Hope this helps. Kindly let us know.

[GoWallParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

You are most welcome!
We are glad we were able to help you out.

If there’s anything else, we can help you with, please let us know.

[GoWallParticipant]

A few more questions:

How do I get rid of the shadows around the button?

How would I make a second, ‘register’ button?

Is there a way to center the navbar menu links (with and/or without the search item) while keeping the button(s) to the right?

[GoWallParticipant]

Also, how would I make it so you just scroll over (vs. click) menu items for the submenus to drop down?
And can I make the button flat?

[Paul RModerator]

Hi,

Upon checking your site, I am getting a 404 not found.

http://screencast.com/t/nz1Wfa9eUxsA

Kindly check again and let us know.

Thanks

[GoWallParticipant]

Like I mentioned before, we moved to a localhost installation, so no one but me can access the site (which is also making it a pain to validate the product… any ideas?)

Anyways, here’s the php code for the button:

// Add button to nav menu
// =============================================================================
if( ! function_exists('x_button_nav_item') ) {
function x_button_nav_item( $items, $args ) {

  if ( $args->theme_location == 'primary' ) {
    $items .= '<li class="menu-item x-menu-item x-menu-item-button"><span><a class="x-btn x-btn-red x-btn-real x-btn-square x-btn-mini" href="https://acceptance.gowall.com/#/login" title="Example">Log In</a></span></li>';
  }

  return $items;

}
add_filter( 'wp_nav_menu_items', 'x_button_nav_item', 10000, 2);
}
// =============================================================================

…and here’s the css code:

.x-btn, .x-btn:hover, .button, .button:hover, [type="submit"], [type="submit"]:hover {
  border-width: 2px;
  text-transform: uppercase;
  background-color: #97D700;
}

.x-navbar .desktop .x-nav>li.x-menu-item-button .x-btn {
  color: #000000;
  vertical-align: -30px;
  font-weight: 600;
  font-size: 16px;
  padding: px;
}

and here’s a screenshot of what the button looks like currently (it also highlights the bottom part, above the shadow, in black, when scrolled over. Is there a way to change this color?):

View post on imgur.com

[Rue NelModerator]

Hello There,

Thank you for the detailed information.

1] To get rid of the shadows around the button, please use this code:

.x-navbar .desktop .x-nav li .x-btn,
.x-navbar .desktop .x-nav li:hover .x-btn,
.x-navbar .desktop .x-nav li .x-btn:hover {
  box-shadow: none;
  border: none;
}

2] To make a second, ‘register’ button, simply edit your code and add this code instead:

if ( $args->theme_location == 'primary' ) {
     $items .= '<li class="menu-item x-menu-item x-menu-item-button"><span><a class="x-btn x-btn-red x-btn-real x-btn-square x-btn-mini" href="https://acceptance.gowall.com/#/login" title="Example">Log In</a></span></li>';
     $items .= '<li class="menu-item x-menu-item x-menu-item-button"><span><a class="x-btn x-btn-red x-btn-real x-btn-square x-btn-mini" href="https://acceptance.gowall.com/#/register" title="Example">Register</a></span></li>';
}

3] There is no way to center the navbar menu links (with and/or without the search item) while keeping the button(s) to the right because they are in the same container.

4] How would I make it so you just scroll over (vs. click) menu items for the submenus to drop down,
By default, you can hover on the menu items and the sub menu will open. Unless you made some customization that the menu items needs to be clicked before the sub menu opens. You can also use this code to force the submenu to open when menu item is hovered:

.x-navbar .desktop .x-nav li:hover > .sub-menu {
    display: block;
}

5] To make the button flat, please add a x-btn-flat in the class. Perhaps your code should be like this:
$items .= '<li class="menu-item x-menu-item x-menu-item-button"><span><a class="x-btn x-btn-red x-btn-real x-btn-square x-btn-flat x-btn-mini" href="https://acceptance.gowall.com/#/register" title="Example">Register</a></span></li>';

Please let us know if this works out for you.

[GoWallParticipant]

Hi,

Those suggestions have helped a lot. A few more related questions:

What are my options for adjusting the box-shadow attribute? Removing the shadows entirely makes the button flat, and flat just doesn’t work on the colored navbar I have.

How can get some space between the Register and Log In buttons?

Also what does x-btn-red do in the php class?

[Author]

Posts