Menu Navbar -different link

[joserodrigz]

Hi there,
How can I put a menu link on the navbar but like a pill —I mean similar to a button with different color than the navbar color background and like a pill design, text inside different color and interaction, etc…

Tks in advance!
J

[prakash_s]

Hello @joserodrigz,

Thanks for writing to us.

In case if you are an X theme in that case you to add custom CSS code to achieve what you are looking for.

In case if you are using the Pro theme you can use Navigation Inline element and style the menu item with the help of element settings

Hope it helps
Thanks

[joserodrigz]

Tks I’m using X, so please let me know about the CSS codes…

Tks in advance!

[marc_a]

HI @joserodrigz,

Regretfully, providing custom codes is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

On the other hand, I suggest that you convert your X to Pro:

• https://theme.co/docs/converting-from-x-to-pro

Hope that helps.

Thank you.

[joserodrigz]

Sorry, I saw thousand topics on this forum with thousand CSS codes… I don’t understand your message

[joserodrigz]

I just need something like this —and is a part of X Theme Demo… (the Donation button)

[nabeel]

Hi @joserodrigz,

Since you’re using X, you can follow this thread Button in menu to achieve the similar result.

Please note that the code provided in the thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[joserodrigz]

Thank You!

I posted:
.standout-menu-item > a > span {
border: 2px solid #559D07;
padding: 20px;
background: #c2ffb5;
color: #559D07;
}

.standout-menu-item > a {
padding-top: 15px !important;
}

But how can I create the same “pill” look?
Thanks in advance

[ruenel]

Hello @joserodrigz,

Please add a border-radius property to your code above and also adjust the padding to at least 10 pixels. For more details, please check this out:

• https://www.w3schools.com/cssref/css3_pr_border-radius.asp

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

[joserodrigz]

Working perfectly !
Tks!

[joserodrigz]

Just a problem arising… the button looks very big in the responsive menu in a smartphone… how can I put the same look to the responsive ???

Thanks in advance

[prakash_s]

Hello @joserodrigz,

It is not possible to give a proper solution without checking your website. I would request you to please share your site URL so that we can check and guide you properly

Thanks