Apply Pay Button Width and Navigation Menu Adjustments

Hello,

I have three quick issues that I could use your help with. All the websites are below in the private info

Item #1: Apply Pay Button Size – the button looks cut off on the right hand side or extends too wide. It differs in size on all our websites. How can I make it the same size as the ‘ADD TO CART’ button, but not make it look cut off?

Item #2 Sub Menu (Remove Bold) – if you look at the sub menu items under shop products, they are all bold. How can I remove this and make it look like the other menu items? I don’t know how they became bold.

Item #3 Sub Menu Width – My goal is to have all the sub menu items on one line each. I tried to extend the width of the top menu, but the sub menus still break into two lines. Is there a css code that will allow the menu to adjust the width automatically, while allowing each menu item to sit on one line.

I appreciate your help. Thanks.

Attachments:

You must be logged in to view attached files.

Hi,

1. Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.single-product-page .single_add_to_cart_button {
	min-width: 200px;
}

2. Use the following custom code to change the style of sized design first level menu items.

body .basel-navigation .menu > li.menu-item-design-full-width .sub-menu > li > a, 
body .basel-navigation .menu > li.menu-item-design-sized .sub-menu > li > a {
	font-weight: 400 !important;
	font-size: 13px;
	font-family: Lato;
}

3. Choose a sized (https://prnt.sc/ncjca4) style to your menu item and set the width of it (https://prnt.sc/ncjbhd) or choose a Full-width menu style (https://prnt.sc/ncjcwb)

Regards

Hello,

Item #1 – it didn’t resize the apple pay button, it just made the add to cart button wider. (see attachment)

Item #2 – it worked. Thanks

Item #3 – Image link is in the private content area below. No matter how much I resize the boxes, the menu items still have a line break. (see arrows in the pic) I would like the titles to be on one clean line each.

I appreciate your help.

Attachments:

You must be logged in to view attached files.

Hi,

1. Please provide a link to both product pages from your first post screenshots.

3. Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .basel-navigation .menu > li.menu-item-design-full-width .sub-menu > li, 
body .basel-navigation .menu > li.menu-item-design-sized .sub-menu > li {
	width: 100%;
	margin-right: 0;
}

Regards

#1 The product page links are below.

#2 It didn’t work, I provided you with admin login below so you can take a look. Let me know your thoughts.

I appreciate your teams help.

1. Please provide a direct link to the product pages on both sites. Pages, where add to cart and apple pay button is located.

2. You have changed menu design in menu item options and our code snippet is not working anymore. Please choose “set sizes” (https://prnt.sc/nd1n1z) design and paste (https://xtemos.com/forums/topic/apply-pay-button-width-and-navigation-menu-adjustments/#post-119259) our code again.

Regards

(1) The apply pay button is on all product pages. If you are using a mac without the new touch ID sensor, it will not show up on your desktop, so you will need view it via your mobile apple device. You will also need to have a card activated in your apple wallet for it to show up. See links in private content below.

(2)I set it back to “set size” and pasted your code exactly. No matter what size I input, it still doesn’t work. I set it back to default to no sizes so you can play around with it and take a look.

Sorry for all the back and forth, but I’ve genuinely been trying to fix this myself for sometime before I messaged your team.

1. Products that you provided is different in HTML structure since one is variable and other is not. Try to use the following code snippet on both sites to change apple pay button width.

#wc-stripe-payment-request-button,
#wc-stripe-payment-request-button-separator {
	max-width: 250px;
}

.woocommerce-variation-add-to-cart {
	min-width: 250px;
}

2. When you select “Set sizes” (https://prnt.sc/nd1vxp) you need to also set the actual size of your dropdown, in another situation it will be ignored. Try to use 350px width as an example. As you can see from the screenshot (https://prnt.sc/nd1w6h), our code is working correctly.

Regards

1. It worked. I had to change the first number to 140px for it to match the size.

2. Thanks, once I added 350px by 100px as the size, it worked perfectly.

I appreciate your help. Please close the ticket.

You are welcome!

[Author]

Posts