Adding a Button to Navigation Menu

[eutaw]

Is it possible to add a button inline on the navigation menu with this theme? If so, how is that done?

[friech]

Hi Eutaw,

Thank you for writing in, please add your button as part of the menu. Apply a CLASSES:
x-btn x-btn-flat x-btn-rounded x-btn-regular to that menu item so it will get a styling of a button.

If you don’t see that CSS Classes field, please pull down the Screen Options menu, and tick the CSS Classes

Hope it helps,
Cheers!

[eutaw]

I think I am missing something. I added the following code to Appearance > Customize. However, I’ve since deleted it.
.x-navbar .x-nav > li.x-btn-rounded > a > span {
border: 2px solid #4d4d4d;
padding: 8px 18px;
display: inline-block;
margin-top: -8px;
}

I also updated the menu by adding x-btn-rounded to a CUSTOM link. See screenshot. Is x-btn-rounded already set up in the X theme or do I need to add it? If so, where?

[rad]

Hi @eutaw,

Those classes are ready to use, you just need to add it as recommended above. You only need to add that styling if you wish to style it different from what’s applied by that class.

Or do you mean it’s not working when you added it? And the CSS should be

.x-navbar .x-nav > li.x-btn-rounded {
border: 2px solid #4d4d4d;
padding: 8px 18px;
display: inline-block;
margin-top: -8px;
}

It’s because the button class is applied to the menu item and not to the link or span.

Thanks!

[eutaw]

I really don’t want the styling. I want to use the buttons as is, except I want to change the color of the buttons. However, the button is flat with no color if I don’t style it. (Please see Schedule Appointment on the navigation menu. Thanks.

[rad]

Hi @eutaw,

I see, first, don’t add <button> </button> to your navigation label since you’re adding the class to menu item.

Second, please add x-btn x-btn-rounded my-btn-class

Then last, please implement your own CSS to change its color, this time, using the my-btn-class, example

Button | Themeco Docs

    .x-btn.my-btn-class {
      color: #ffffff;
      border-color: #ac1100;
      background-color: #ff2a13;
    }

    .x-btn.my-btn-class:hover {
      color: #ffffff;
      border-color: #600900;
      background-color: #ef2201;
    }

You can’t really avoid any styling since you wish something different from the default styling.

---

OR instead of above

Add this as your navigation label instead of adding x-btn x-btn-rounded my-btn-class to menu item’s class.

<button class="x-btn x-btn-rounded my-btn-class">Awesome Button</button>

Then implement the same custom styling as above.

Thanks!

[eutaw]

Thank you. Adding the button seriously changed the height of the navigation bar. This is what the navbar looked like before adding the button.

You can see that the white spacing is the height of the logo.

After adding the button using CSS Classes (x-btn x-btn-rounded my-btn-class), the button has an enormous height, as shown below.

When I added the button element to the navigation label, it also caused more white space and the text on the navigation bar is now on top of the image. (This is shown on the website now.) I changed NAVBAR TOP LINK ALIGNMENT to different values but the text still stays on top the image.

I would REALLY appreciate your help in removing the white space and getting the navigation text in the navigation area.

[rad]

Hi @eutaw,

It doesn’t change the height, the menu just became wider as the button is wider than standard text, and since you’re viewing it on a small screen, the menu is pushed under the logo. Try removing one of the menu items and you’ll see what I mean. It just looks like taller height because the background is applied to the menu item where height is equal to 50px with top padding of 120px.

The second option that I provided should work okay since the background color is not applied to the menu item, but to <button></button> and I see that you already implemented that. What’s left I think is changing its top position so please change the above CSS to this

.x-btn.my-btn-class {
    color: #ffffff;
    border-color: #ec6434;
    background-color: #ec6434;
    position: relative;
    top: -15px;
}
    .x-btn.my-btn-class:hover {
      color: #ffffff;
      border-color: #600900;
      background-color: #ef2201;
    }

So it would center with other menu items.

Thanks!

[eutaw]

Thank you very much. I deleted an item from the menu and changed the CSS as you suggested and it looks great. Can you suggest a tutorial to explain why moving an item from the menu fixed this problem? I thought changes would have to be made to height of the menu item or the top padding, but changing those had no affect.

[ruenel]

You are most welcome.

By the way, we do not have any knowledge of a good tutorial that would somehow explain why it is doing that. I am just hoping the Rad’s brief explanation helps.

[eutaw]

OK, thanks.

[paul.r]

You’re welcome!