[GoWallParticipant]

Hello,

I was wondering if it is possible to add buttons to the navbar or topbar, and if I could separate most of the navbar menu from these buttons? The website I’m working with is test-portal.gowall.com and I’d like to place a login button on the right-hand side of the navbar, separate from the rest of the menu, preferably.

[LelyModerator]

Hello There,

Please add <a href="BUTTON URL HERE">BUTTON CAPTION HERE</a> to Customize -> header -> Topbar Content to display button .

Hope it helps.

[GoWallParticipant]

Thanks. Is there any way to get the button into the navbar, not the topbar? How about changing the menu item text font’s size or color, or making the navbar fully transparent (currently have two thin white horizontal lines above and below it when I choose transparent on in the customizer), or changing the search icon to also have search text next to it?

[Rue NelModerator]

Hello There,

You can add a custom link in your navbar. You can go to Appearance > Menus and manage to add login custom link from there.

To make your navbar transparent and remove the horizontal lines, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar,
.x-navbar {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

To change the colors of the menu items, please go to your customizer, Appearance > Customize > Typography > Navbar > Navbar Links

To display the search text next to the icons, please add this in your customizer, Appearance > Customize > Custom > CSS

.x-menu-item-search span.x-hidden-desktop {
    display: inline-block !important;
}

Please let us know if this works out for you.

[GoWallParticipant]

Yes, thank you, but I have a few more questions.

I’d like to place an actual button in the navbar, kind of like the one I have in the top bar, not just a linked menu item. Is this possible?
Also, where can I find the customization options or what css code can I use for the navbar’s text’s font, color, submenu styling options, moving the search text in front of the magnifying glass, and the way the menu open/are highlighted when you rollover the menu item?

Finally, can you tell me some options for displaying a clean looking sitemap at the bottom of every page of my site?

[GoWallParticipant]

One more thing that is probably related: how do I style breadcrumbs?

[Rue NelModerator]

Hello There,

To place an actual button in the navbar, please insert this code in your child theme’s functions.php

// Add button to nav menu
// =============================================================================
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>'
              . do_shortcode('[button shape="square" size="regular" float="none" info="none" info_place="top" info_trigger="hover" href="#" class="nav-button"]Button text[/button]')
              . '</span>'
            . '</li>';
  }

  return $items;

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

To change the color, font and other style for the menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .sub-menu a, 
.x-navbar .mobile .x-nav li > a {
  color: #333333;
  /* add your styling here */
}

To style your breadcrumb, please use this css;

.x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
  color: #333333;
}

To move the search text in front of the magnifying glass, please insert this code in your child theme’s functions.php

// Navbar Search Navigation Item
// =============================================================================

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

    if ( x_get_option( 'x_header_search_enable', '' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span> <i class="x-icon x-icon-search"></i></span>'
                  . '</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9999, 2 );
endif;
// =============================================================================

Let us know if this has been helpful to you.

[GoWallParticipant]

The php code for moving the search text around seems to crash my site as though I’d corrupted the functions.php file. Everything else was very helpful, also though I would like to know how to create a nice looking sitemap (keeping it simple, can be mostly text, just not another blocky menu). Thank you!

[Rue NelModerator]

Hello There,

Can you please insert the contents of you child theme’s functions.php here? To do that, enclose your php code with the code tag.

Regretfully, there isn’t a feature in X to create a sitemap. You might be able to accomplish it by using a plugin. Please try this plugin: https://wordpress.org/plugins/sitemap/

Thanks for understanding.

[GoWallParticipant]

Right now it is blank, and I thought the problem occurred when copying over the search text in front of the magnifying glass code, but it looks like I don’t understand child themes at all, because I can’t even copy the code in the parent theme’s functions.php file to the child theme’s without having it break the live preview. Please help, no idea what I’m doing wrong, and breaking the website has caused me a lot of frustration and stress already (my fault, not yours, but still, help!)

[Nabeel AModerator]

Hi again,

Instead of the previously provided code please paste the following code in your child theme’s functions.php file at the end carefully:

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="#example" title="Example">Square Button</a></span></li>';
  }

  return $items;

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

Let us know how this goes!

[GoWallParticipant]

It looks like the code works – the website doesn’t go blank/crash when I added it to the child theme’s function.php file. The problem now is that when I copy over the parent’s functions.php content, it doesn’t do anything and the website preview with the child theme is complettely disorganized/has no layout.

[DarshanaModerator]

Hi there,

Did you add it to the bottom of the parent theme’s functions.php file? It could be the reason that one of your another code fragment might break the code in between.

Could you please post the whole code in your functions.php file here.

Thanks!

[GoWallParticipant]

This reply has been marked as private.

[GoWallParticipant]

This reply has been marked as private.

[Author]

Posts