Custom Nav Bar Button

[quituck]

Hi,
I am having trouble solving two issues.

I created a nav bar button with the help of this thread: Adding a Button to Navigation Menu

I ran into a couple problems along the way that I would appreciate your help with:

1. I need help centering the text inside of the nav bar button. I created the nav button using the following css.
   .x-navbar .x-nav > li.x-btn-rounded {
   background-color: #04aa2c;
   margin-top: -2px;
   height: 3.2em;
   position: relative;
   bottom: -30px;
   padding: -1px -1px;
   }

   .x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a, .x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
   color: #fff;
   font-size: 1.2em;
   }

2. I want to remove the hamburger menu on mobile and only display the Custom “Donate Now” Button on mobile. How can I remove the hamburger menu and only display the button on mobile and table devices?

3. Lastly, how can I center the 3 products on my Shop section of the home page. Currently I have a woocommerce short code to display three shirts on the home page but I don’t know how to center them.

Please advise.

Thank you!

[prakash_s]

Hello @quituck,

Thanks for writing to us.

To align the menu text centre you need to add this custom CSS code under Pro–>Theme Option -->CSS

.x-navbar .desktop .x-nav > li > a {
    height: auto;
    padding-top: 8px;
}

Since you are using Pro you can create a custom Header, In case if you have only one menu item then I would suggest you add a button element on the Header bar. In this process, you will easily display the button on desktop and mobile version as well. In case if you haven’t seen our Pro Header/Footer builder doc please have a look at it. https://theme.co/docs/header-footer-overview

For the shop section

To make the product align centre you need to set the product column in 3 columns.
For that, your shortcode should be like this

[product_category category=“tshirt” columns="3"]

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks