Responsive menu issue with custom made HTML blocks

Hi there,

I was just playing around with the following HTML block for a custom menu:

[vc_row css=".vc_custom_1495625984857{margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}"][vc_column css=".vc_custom_1495626017363{padding-top: 0px !important;padding-bottom: 0px !important;}"][vc_row_inner css=".vc_custom_1450200676853{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;}"][vc_column_inner width="1/4" css=".vc_custom_1446742142663{margin-bottom: 0px !important;}"][vc_column_text css=".vc_custom_1495626539202{margin-bottom: 10px !important;}"]
<ul id="" class="sub-menu">
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/product-category/woman/">Sales Kategorien</a>
<ul id="" class="sub-sub-menu">
 	<li id="" class="item-with-label item-label-new"><a id="" class="" href="http://dev.xtemos.com/new/shop/?shopmasonryalt">Masonry grid <span class="menu-label menu-label-hot">HOT</span></a></li>
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/shop/?shop_alt">Alternative shop</a></li>
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/shop/?shophover1">Default style</a></li>
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/shop/?shophover2">Button on hover</a></li>
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/shop/?shophover3">Button hover alt</a></li>
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/shop/?shophover4">Hover info</a></li>
 	<li id="" class=""><a id="" class="" href="http://dev.xtemos.com/new/shop/?shopfullwidth">Full width</a></li>
</ul>
</li>
</ul>
[/vc_column_text][vc_column_text css=".vc_custom_1495626472010{margin-bottom: 0px !important;}"]
<h5 style="text-transform: uppercase; font-weight: bold; margin-bottom: 5px;"><i class="fa fa-truck" style="margin-right: 7px; font-size: 14px;"></i>Portofrei</h5>
Portofofrei ab 50+ CHF[/vc_column_text][/vc_column_inner][vc_column_inner width="1/4" css=".vc_custom_1446742137800{margin-bottom: 0px !important;}"][basel_posts slides_per_view="1" hide_pagination_control="yes" hide_prev_next_buttons="yes" posts_query="size:1|order_by:date|post_type:product|tax_query:49|by_id:10632"][/vc_column_inner][vc_column_inner width="1/4" css=".vc_custom_1446742132151{margin-bottom: 0px !important;}"][basel_posts slides_per_view="1" hide_pagination_control="yes" hide_prev_next_buttons="yes" posts_query="size:1|order_by:date|post_type:product|tax_query:49|by_id:10636"][/vc_column_inner][vc_column_inner width="1/4"][basel_posts slides_per_view="1" hide_pagination_control="yes" hide_prev_next_buttons="yes" posts_query="size:1|order_by:date|post_type:product|tax_query:49|by_id:10634"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Unfortunately, I see it broken on mobile responsive mode. Look at the attachments. How should it work on mobile mode WHEN you have some custom post queries with the VC module called posts carousel. In the demo, there is no such manner! It’s really surprising me. Somehow, it’s broken for the end user experience.

Can you take a look at this issue?

Thanks a lot to you guys,

Simon

Attachments:

You must be logged in to view attached files.

Some better screenshot attached.

Attachments:

You must be logged in to view attached files.

[vc_row css=”.vc_custom_1495625984857{margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_column css=”.vc_custom_1495626017363{padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_row_inner css=”.vc_custom_1450200676853{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;}”][vc_column_inner width=”1/4″ css=”.vc_custom_1446742142663{margin-bottom: 0px !important;}”][vc_column_text css=”.vc_custom_1495626539202{margin-bottom: 10px !important;}”]
<ul id=”” class=”sub-menu”>
<li id=”” class=””>Sales Kategorien
<ul id=”” class=”sub-sub-menu”>
<li id=”” class=”item-with-label item-label-new”>Masonry grid <span class=”menu-label menu-label-hot”>HOT</span>
<li id=”” class=””>Alternative shop
<li id=”” class=””>Default style
<li id=”” class=””>Button on hover
<li id=”” class=””>Button hover alt
<li id=”” class=””>Hover info
<li id=”” class=””>Full width

[/vc_column_text][vc_column_text css=”.vc_custom_1495626472010{margin-bottom: 0px !important;}”]
<h5 style=”text-transform: uppercase; font-weight: bold; margin-bottom: 5px;”><i class=”fa fa-truck” style=”margin-right: 7px; font-size: 14px;”></i>Portofrei</h5>
Portofofrei ab 50+ CHF[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/4″ css=”.vc_custom_1446742137800{margin-bottom: 0px !important;}”][basel_posts slides_per_view=”1″ hide_pagination_control=”yes” hide_prev_next_buttons=”yes” posts_query=”size:1|order_by:date|post_type:product|tax_query:49|by_id:10632″][/vc_column_inner][vc_column_inner width=”1/4″ css=”.vc_custom_1446742132151{margin-bottom: 0px !important;}”][basel_posts slides_per_view=”1″ hide_pagination_control=”yes” hide_prev_next_buttons=”yes” posts_query=”size:1|order_by:date|post_type:product|tax_query:49|by_id:10636″][/vc_column_inner][vc_column_inner width=”1/4″][basel_posts slides_per_view=”1″ hide_pagination_control=”yes” hide_prev_next_buttons=”yes” posts_query=”size:1|order_by:date|post_type:product|tax_query:49|by_id:10634″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

Hello,

Sorry, but our responsive mobile menu can’t have HTML Blocks added to it. It will not look well on mobile devices. We suggest you to create a separate menu without custom content in Appearance -> Menus and add to the mobile menu.

Regards

[Author]

Posts