Main menu: margins en subtext

Support
#1

Hi,

I want a little space on the right side from my main menu, 'cause it’s touching the edge of the header now. I can’t figure out how to do that.

Also, I have subtext in the description, but it doesn’t show. What am I missing?

https://www.isnogleuker.nl/

Thanx!

#2

Hello Karin,

Thanks for writing in!

To resolve your issue and fix the search menu item touching to the right side, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r);

.x-navbar .desktop .x-nav > li.x-menu-item-search > a > span {
    margin-right: 1.5em;
}

Feel free to adjust it to reduce or increase the gap.

Regarding the menu item description, that feature isn’t utilized by our theme due to the nature of the menu layout. Descriptions are only good and applicable for rich-featured menus. Adding descriptions will have no effect on our theme’s menu. If there is really a need in your design, you will have to modify the navigation menu. And because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

function x_output_primary_navigation() {

    if ( x_is_one_page_navigation() ) {

      wp_nav_menu( array(
        'menu'           => x_get_one_page_navigation_menu(),
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav x-nav-scrollspy',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } elseif ( has_nav_menu( 'primary' ) ) {
      $walker = new Menu_With_Description;
      wp_nav_menu( array(
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'walker' => $walker,
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } else {

      echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';

    }

}

Hope this helps. Please let us know how it goes.

#3

Thanx for your reaction. I will not meddle with the template, and leave it as it is.

The CSS code you gave me for the margin does not work. In fact, it took off a bit of the bottom of the header (?)

#4

Hi Karin,

Please try this one,

.x-navbar-inner .x-container.width {
margin-right: 50px;
}

It happens since you set your layout and content width to 100%. Hence, removing the spacing on its left and right. Then you set the logo left margin to 50px, so to balance it, the right margin should be the same.

Thanks!

#5

Hi, the same thing happens, no right margin but a bit cut off the bottom of the header.
But thanx for the other tip, I made the side width a bit smaller. That fixed it. Thanks again.

#6

We are delighted to assist you with this.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.