Make menu item into a button

[caitlinvneal]

Hi there, I’m looking for something similar to this post: https://theme.co/apex/forum/t/how-to-make-menu-item-a-button/19418

I tried the CSS from that articles and the comments but I couldn’t produce the desired result

My site is www.caitlinv.com and I want the “free guides” link to be a button

thank you in advance!
Caitlin

[christian]

Hey Caitlin,

As you can see in that thread, it requires a lot of CSS to achieve in X. You can effortlessly achieve this in Pro. Let me first show you how you do this in Pro. Please see this screen recording.

If you wish to continue with X, please follow this method. Here’s the code in that video.

.x-btn.menu-item {
    margin-top: 10px
}

.x-navbar .desktop .x-nav > li.x-btn.menu-item > a {
    height: 26px;
    padding-top: 10px;
  color:red;
}

.x-navbar .desktop .x-nav > li.x-btn.menu-item > a:hover {
	box-shadow: none;
  color: blue;
}

As you can see though, you can achieve a menu with button easily with Pro. On top of that, you can create a custom header thanks to the Header Builder. You can also build a custom footer by the way.

Thanks.