Menu + button css

[ArtK]

Dear Harry,

CEO Artk once again. As promised, I have written you a 5 star detailed review in the best English for your global clients to help increase your sales. I really appreciate your level of support. Our user name is SE**Z 😉 Let me know if you liked my review.

We have to fix CSS issues before launch. Please find staging environment credentials attached. You are free to edit anything and everything without restriction.

Vital for launch :

1.  We are using wishlist plugin (https://wordpress.org/plugins/ti-woocommerce-wishlist/) which is FAR better than YITH. We need a small CSS modification to align the button in single product page (All 4 layout + mobile) and change its appearance like in your demo wesbite. Can you make the button exactly like in your beautiful demo website.

Plugin has excellent back-end custom css options. Dashboard–>TI wishlist –> style settings.

2.      The ‘buy for me’ button is sticking to the wishlist button and has big misalignment issue. Can you please ensure that all 4 buttons (stock+add to cart+ wishlist+ buy for me) are nicely placed and mobile responsive for all your 4 layouts. All layouts are important as we are multi-vendor and a vendor can choose any product layout. (Example product with all 4 buttons : https://woocommerce-144226-514907.cloudwaysapps.com/product/spray-paint-art-sunset)

Menu:

3.     We use max mega menu as recommended by you. Can you please add the hot, new etc menu badge. We do not care about any arrow in the menu. Hence, you can safely remove arrow so that the badge can display (I think you need before and after to be empty). Please keep in mind that we have made custom badge  (next point) and they need to appear in the places where we put class as “custom class” like hot, new etc in the menu.

4.      Can you please provide code to create custom menu badge eg: ‘Coming soon’.

5.      Can you please add the css so we can add the badge to footer menu too. This is important as our footer has highly important links.

Thanks a lot Harry.

Best Regards,

Artk

[Harry]

Hi Artk,

Thank you for your kind words and your rating.

1,2. Please add below code

.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt,
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt,
a.wishlist_products_counter.top_wishlist-heart-plus.no-txt {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid;
}
.single_variation_wrap + .tinvwl-after-add-to-cart {
	display: none;
}
.tinv-wraper.tinv-wishlist {
	display: inline-block;
}
.tinv-wraper.tinvwl-above_thumb-add-to-cart {
	position: absolute;
	left: 5px;
	top:  5px;
	z-index: 99;
}
.tinv-wraper.tinvwl-above_thumb-add-to-cart a {
	border: none !important;	
}
@media only screen and (min-width: 1025px) { 
.button.brnhmbx-bfm-button {
margin-left: 10px;
}}

3,4.5.

#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
	padding:  0 !important;
}
.mega-menu-wrap li > a,
footer .menu li > a {
   	position: relative;
}
.mega-menu-wrap li > a:before,
footer .menu li > a:before  {
	position: absolute !important;
	color: #fff !important;
	font-size: 9px !important;
	padding: 1px 7px 0 !important;
	border-radius: 50px;
	line-height: 16px !important;
	font-family: 'Poppins', sans-serif !important;
}
.mega-menu-wrap ul li.hot > a:before,
.mega-menu-wrap ul li.sale > a:before,
.mega-menu-wrap ul li.new > a:before,
.mega-menu-wrap ul li.coming-soon > a:before {
	right: -3px !important;
	top: 5px !important;
}
footer .menu li.hot > a:before,
footer .menu li.sale > a:before,
footer .menu li.new > a:before,
footer .menu li.coming-soon > a:before  {
	right: -13px !important;
	top: -15px !important;
}
.mega-menu-wrap li.hot > a:before,
footer .menu li.hot > a:before {
	content: 'Hot';
	background: #ff3e11;
}
.mega-menu-wrap li.sale > a:before,
footer .menu li.sale > a:before {
	content: 'Sale';
	background: #ffa800;
}
.mega-menu-wrap li.new > a:before,
footer .menu li.new > a:before {
	content: 'New';
	background: #01bad4;
}
.mega-menu-wrap li.coming-soon > a:before,
footer .menu li.coming-soon > a:before  {
	content: 'Coming Soon';
	background: #a3b745;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

Dear Harry,

Thank you very much for fixing the button alignments for wishlist and buy for me button which are now working good.

The menu  and footer css for badges needs some more fixing. (Please see screenshots to better understand )

1. If primary menu is made shorter in length/If the menu link’s text length is reduced /number of items in the menu is reduced (anything that affects menu length) , then the badge is overlapping with link text and badge text is having line break which is changing badge shape. We need to stop line break I think.  Also, if link extends to 2 lines then position misalignment happens (Screen-shot)
2. In the footer menu, if the link text is two lines, badge is positioned relative to first line causing mis-alignment. (Screen-shot)
3. Mega menu width decreases if number of links are less in menu and hence causing line break in sub-menu columns. This is also causing badge issues. Can you fix mega menu width irrespective of number of links? (screen shots)
4. In mobile menu google chrome mobile browser, text overlaps if link length is big. Also, badge overlaps arrow. Is this normal? (Screen shots)

Can you please edit the code to fix the issues. You can check production site to see how menu looks right now 🙂

Please keep in mind that we will change site design and hence your code should be universal and not specific to how our site looks right now.

Best Regards,

Team Artk

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Artk,

1. I help you fix menu badge on mobile and sub-menu

2. The issue with menu in footer when the text link in 2 line it can’t at the end second (the badge hack by CSS and position not HTML text)

Please check code i added in Claue > Theme Option > General Layout > Custom CSS

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

Hi Harry,

1. Thank you for fixing the menu badge on mobile and sub-menu. Looks perfects 🙂
2. For point 2, you mean we have to only use single line text links in footer due to limitations in css ?
3. We have a small new point: 
    We just noticed that the buy for me button needs a left margin in mobile landscape mode (see screenshot).

Can you please give the css code to make the buy for me button mobile responsive. (I think 1 line media query)

Since you are updating your theme, to help you save testing time, we will share a few bugs which affects all your customers in a separate ticket 😉

Thanks a lot Harry 🙂

Best Regards,

Team Ak

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Artk,

2. Yes, because the badge use CSS to show it now the content text next to menu title

3. I checked your site it now the “Buy For Me” button full width on mobile. Did you fix this?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

Hi Harry 🙂

You have to check the site in landscape mode in mobile. Please turn your mobile 180 degree.

The buy for me button needs a small left margin. Please refer to previous screenshot attached which was screenshot in landscape mode.

Thanks a lot Harry and hope you are doing good 🙂

Best Regards,

Team Artk

[Harry]

Hi ArtK,

Did you check on real device or simulator?

Because I check the code, the button will show full on mobile device

 

Best regards

 

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK,

I checked on your staging site so don’t see problem

Please change the code

@media only screen and (min-width: 1025px) {
.button.brnhmbx-bfm-button {
	margin-left: 10px;
}}

to

@media only screen and (min-width: 480px) {
.button.brnhmbx-bfm-button {
	margin-left: 10px;
}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

 

Hi Harry,

Fantastic 🙂 All is working well for the points mentioned above.

We will create a new staging for you for our next ticket. We hope to correct a few bugs we found.

Have a nice weekend and thanks a lot as always 🙂 .  You can mark this as resolved 🙂

Kind Regards,

Team Artk

[ArtK]

This reply has been marked as private.

[Harry]

Hi ArtK.

Please add below code

.content-quickview button, .content-quickview a.button {
	padding: 0 30px;
}
.tinv-wishlist .product-action .button {
	white-space: nowrap;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

This reply has been marked as private.

[Harry]

Hi,

Please add below code

.content-quickview .tinv-wishlist.tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button {
	margin-top: 0 !important;
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArtK]

Thanks a lot Harry 🙂 Now everything is working perfectly 🙂

You can mark this as resolved. We will make you a new staging environment for next time.

Have a nice weekend Harry.

Best Regards,

Team Artk

[Author]

Posts