Menu item drops out of the mainmenu

Hi,

Please use this custom css to fix this issue: http://screencast.com/t/gfE7MOzI

@media (max-width: 1018px) and (min-width: 768px) {
.blog-stack .sf-menu>li>a {
font-size: 13px !important;
padding: 0px 15px 0px 15px !important;
}

.menu-item-29 .sf-sub-indicator{
top: 22px !important;
right: 0px !important;
}
}

Thanks

Hello,
Please provide a link to your site as the solution above is from Oct 20, 2014 and it will not work anymore. Provide a link and I will provide the proper css to make the menu narrower
Thank you!

Hi,

Please ad this code in the theme panel->advanced css code under tha tablet landscape box:
.sf-menu a.sf-with-ul{
padding-right: 27px!important;
}
For the tablets portrait unfortunately there is no simple solution as the menu items will be way to close to each other to display on a single line. This solution will only work for smaller desktop screens or tablets landscape.

Thank you!

Unfortunately for tablets portrait there is little to be done except reduce the number of menu items. But there is no way to only reduce the number of menu items for particular devices unfortunately.
You can try to reduce the font with css for tablets portrait to create more space. You can use this code and place it in the advanced css box in the tablets portrait box:
ul.sf-menu>.td-menu-item>a{
font-size: 12px;
}

Thank you!

Sorry but there is no other way. The container simply will not support too much text. If you add more items than the width can handle, it will fall on 2 columns. There is no way of showing a long string of text in a single line and be readable for the customer.
Sorry but Besides decreasing the spacing between the menu items and decreasing the font, there is nothing to be done. The theme width is fixed and it cannot be increased.
Thank you!

Hi,

Unfortunately the theme doesn’t have such an option, sorry! You will need custom modifications to create a similar main menu.

Thanks!