header menu, two widgets bad align

Hi @diegomak,
?
You might need a custom CSS to fix this. However, the feature to display a search box and WooCommerce mini cart using a shortcode is available with the Astra Pro plugin.
?
??And as mentioned in the Forum Guidelines, this forum is intended to help the Astra free users, so you might consider reaching out to us through our Support Portal for any queries related to Astra Pro.

?Kind regards,
?Herman ??

Hi herman, I have no idea of forum is only for free user., my first support request.
custom css to fix this.. ok that will work.

But I have a doubt, is this not a bug? using astra header must be in account this kind of situations right?

Hi, after a lot of research i learn some things.

The problem reported here was solved with the following:
Maybe not the better solution, but looks like I want.

/*SOLVE SEARCH AND minicart button.. problem on Mobile
*/
/* portrait layouts smaller than 930px, most mobiles */
@media only screen
and (max-width : 930px){
.ast-masthead-custom-menu-items * {
display: flex !important;
align-items: center !important;
justify-content: center !important;

}

/*This to restore the bubble circle with count number posicion.
*/
@media only screen
and (max-width : 930px){.ast-site-header-cart i.astra-icon:after {
margin-top: -10px !important;
}

I did a lot of other personalization on minicart.
I share with others.

/* personalization, dropdown product list. -mini-cart
*/

.ast-site-header-cart .widget_shopping_cart .cart_list a, .woocommerce .ast-site-header-cart .widget_shopping_cart .cart_list a {
line-height: normal;
font-size: 12px;
color: #000;
}

/* /* personalization, Mini cart- empty car – mini cart
*/
.ast-site-header-cart .ast-site-header-cart-data .woocommerce-mini-cart__empty-message, .woocommerce .ast-site-header-cart .ast-site-header-cart-data .woocommerce-mini-cart__empty-message {
text-align: left;
color: #000000;
font-size: 12px;
}

/* /* personalization, dropdown product list. size and buttons style mini-cart
*/
a.button.wc-forward {
font-size: 12px;
}
a.button.checkout.wc-forward {
font-size: 12px;
}

/* mini Car button count color background . bubble circle
*/
.ast-site-header-cart i.astra-icon:after {
background: none;
}

/*Astra change the order of menu vs search and mini cart.
1. before menu
2. After menu*/

.ast-header-break-point.ast-header-custom-item-outside .ast-masthead-custom-menu-items {
order: 2;
}

• This reply was modified 4 years, 5 months ago by diegomak.
• This reply was modified 4 years, 5 months ago by diegomak.

?Hi @diegomak,

?Good to know that you have managed to make it work.

However, you can put both shortcodes in a single text widget. ?This will not affect the alignment on mobile devices.?

Please mark the topic as resolved and do let us know if there’s anything else we can help you with.

??Have a nice day and stay safe!

??Kind regards,
?Herman ??

Thanks, of course, I will use your solution, more simple, less customization(that’s better)