how to fix menu issue on ipad

Hello,

This Happens when there are too many items in the Menu than it can accommodate and is larger than the available width. Consider adding the following CSS Code:

.device-lg #primary-menu ul li a {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 12px;
	letter-spacing: 0;
}

It is recommended to use lesser Menu Items or use them into Sub-Menus as currently the items are too many to accommodate even if you make the Font Size and Padding smaller. In this case, you will need to move all the #header, #logo and #primary-menu Related CSS Code Blocks in the css/responsive.css File from the @media (max-width: 991.98px) Media Query to the @media (max-width: 1199.98px) Media Query. You can tweak it according to your requirements so that it best fits the available width.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We already did mention this in the Previous Reply:

In this case, you will need to move all the #header, #logo and #primary-menu Related CSS Code Blocks in the css/responsive.css File from the @media (max-width: 991.98px) Media Query to the @media (max-width: 1199.98px) Media Query.

You will need to move the codes according to mentioned above.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We absolutely understand, however, this is something which is related to Customization as the amount of Menu Items you are trying to squeeze into the Header is not normal for Standard Viewports (Macbook 13 inch Sizes) and we have provided the Menu Design/UX to be used on Standard Widths in respect to Bootstrap. So any further Customizations is your responsibility as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . In this case, you will need to move the codes to the appropriate Media Queries or creating a New One as suggested in the Previous Replies. Example:

@media (max-width: 1799.98px) {
	... #header, #primary-menu related CSS codes
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

We understand, however, since this is related to Customization, you will need to do this manually. If this was something simpler or would not take up too much time, we will be more than happy to help. But this request requires deep customization. There are a lot of Menu Options, however, the Full Header Design Option is not provided for so many menu items and the size of all devices needs to be put into consideration. The CSS/JS does not calculate the amount of Menu Items in the Header as it is very expensive on the memory and will cause the Page to slow down which is not ideal.

You will need to do the following things:

1. Create the following Media Query at the top of the css/responsive.css File:

@media (max-width: 1799.98px) {
    ... #header, #primary-menu related CSS codes
}

1. And then move the #header, #logo and #primary-menu Related CSS Code Blocks from the @media (max-width: 991.98px) to the above code.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.