Problem with shortcode in Additional Content

Peter, when you have cange the ID you simple teke css code off the same element taht I inserted on the page and not on the Additional content area.

The page you see is a Test page where the same shortcode is inserted on a html page and at same time on a Additional content area, to explain wath is the differences and to explain you taht in Additional content area I lose some css rules.

The problem is not only my proplem but is a incompatibility beetwen Additional Content area and Visual Composer plug-in.

Peter, Responsive Menu Pro is the best menu plug-in for worpress in my opinion (and not only for wordpress), but 99% of people work with Visual Composer in wordpress and in many plug-in (or shortcode), so if you solve this problem with Visual Composer, you have a new great function for Responsive Menu Pro. Please, take some time to check this incompatibility, try yourself to take some Visual composer item on Additional content area and see the problem.

"...Potentially it is because you are trying to put 2 of the same element on the page at once (one on the page and one in the menu) so the shortcode is getting confused..."

Exactly Peter, but the problem of 2 ID is another problem and was related only for the Test Page used to explain better you the problem with CSS. Forget this other problem about ID and think about Visual Composer elements on Additional Content area.

Please, try in your page:
1) create a new wordpress page with inside a Visual Composer items (for example a tab element)
2) put the same Visual Composer items in the Additional Content area (or a shorcode with inside Visual Composer items)
3) see in Additional Content area wath appen for Visual Composer items

Peter please follow me and take your test:

This below is a simple Visual Composer code for tab

[vc_row][vc_column][vc_tta_tabs][vc_tta_section title="Scheda 1" tab_id="1521186528560-f58361c0-20f3"][vc_column_text]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

[/vc_column_text][/vc_tta_section][vc_tta_section title="Scheda 2" tab_id="1521186528582-a08f3e7e-4e64"][/vc_tta_section][/vc_tta_tabs][/vc_column][/vc_row]

so:
1) take this code in Additional Content area;
2) see wath appen in frontend (you see that the tab in Additional Content area, are not showed perfectly);
3) try to cat off the css related to Additional Content area (for example “padding”, “margin”, “box-sizing” and color), so you can see that tab in Additional Content area, are showed perfectly (because have their proper css related).

I think the problem was caused from “*” that you use on the css rules related to Additional Content.

Try please

The problem was the use of “*” in Additional Content css rules (see below), so ALL “padding“, “margin” and “Box-sizing” in elements of Add. Cont. area are overwrited with this css rules:

#responsive-menu-pro-container *, #responsive-menu-pro-container *:before, #responsive-menu-pro-container *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

So, you need to cut off “*” in css rules, insted of all elements inserted on Add, Cont. area have some visualization problem, because Padding, Margin and Box-sizing are overwrited from your rules.

it just means people need to reset their CSS for the additional content section if it causes some issues because of padding, margins and the box-sizing.

Yes if you add 1-2 div only, but if you have hundreds of div (like in some code, for example in some Visual Composer items) is impossible to reset all div.

So, you need to update the Responsive menu pro to solve “*” problem?

Peter, like said previously, you use “*” in the style below and this cause all problem:

@media screen and (max-width: 8000px)
#responsive-menu-pro-container, #responsive-menu-pro-container:before, #responsive-menu-pro-container:after, #responsive-menu-pro-container *, #responsive-menu-pro-container *:before, #responsive-menu-pro-container *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Peter we can not reset in this way,
because the style reset affect all div present in Addition Content.
We need to remove all “*” present in your code, if not all style are affect to your “*”: for example the code “#responsive-menu-pro-container *” affect style of Container but also of Additional Content but also of all div inside Additional Content.