Problem with shortcode in Additional Content

Yes, I try to put shortcode inside the page and inside the page the shortcode work perfectly, but if I insert the shortcode on the Additional Content area, the shortcode look to lose its css data.

For example see this image http://www.macroweb.it/images/Problem-shotcode-in-additional-content.jpg (Additional Content is the grey area to right of menu”).

Try you go to this page https://macroweb3.quadroweb.it/test-shortcode-in-responsive-menu-pro/:

inside the page I inserted a shortcode and on the same time I inserted the shortcode on the Additiona Content (see Menu > Studio > Contatti): in the page the items are showed correctly but in the Additional Content the items lose css data.

Let me know

I’m a developer and I need to solve this problem with you.

The problem is that ther’is a CSS conflict with responsive menu pro css file: for example, if in the shortcode is present paragraf tag “p”, the paragraf have css setted on responsive menu pro, and not in their css file. The same for “a” tag, padding, margin ecc.

When a shortcode is insert on Additional Content area, some items lose the css setted on their proper css file and have the css setted on responsive menu pro css file. So, items inserted on Additional Content area, lose theis css file reference.

Let mek now I can solve this conflict

Thanks

Peter, I find the problem, please follow me:

the problem is not related directly with shortcode, the problem was generated when I insert in Additional Content area the Visual Composer code (now renamed WPBackery) or other plug-in similar. if I insert in a worpress page a Visual Composer code, the code work perfectly, but if I insert the Visual Composer code in Additional Content area some css are lose and some are ovverride. See this simple example:

This is a simple Visual Composer code (a simple tab element):

[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]

If this code is inserted on page I have this css related to “a” element:

.wpb-js-composer .vc_tta.vc_general .vc_tta-tab>a {
    padding: 14px 20px;
    display: block;
    box-sizing: border-box;
    border: solid transparent;
    position: relative;
    text-decoration: none;
}

But, If this code is inserted on Additional Content area I have this css related to “a” element:

.wpb-js-composer .vc_tta.vc_general .vc_tta-tab>a {
    display: block !important;
    border: solid transparent !important;
    position: relative !important;
    text-decoration: none !important;
}
* so "padding: 14px 20px;" and "box-sizing: border-box;" are cut off...

So, Visual Composer tab have some css rules different in a wordpress page and in Addition content area and this differences cause the problem.

Also, following your suggestion, I try to take off some rules to css related to Additional Content area, for example this below:

#responsive-menu-pro-container #responsive-menu-pro-additional-content {
    color: rgba(224, 137, 137, 1);
}

#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;
}

Without the rules upon, some problem are solve, for example I can have a correct tab code.

So, problem is with Visual Composer (and other plug-in related like Massive plug-in) compatibility with Additional Content area.

At the same time if a shortcode have Visual Composer elements, and I insert the shortcode in Aditional Content area, I have the same css problems.