Hola a todos!

Hice un megamenu dentro de un widget de HTML personalizado con los siguientes scripts que traen estilos de una hoja externa de bootstrap y jQuery para hacerlo funcionar.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

El problema es que estas hojas tienen estilos globales. Por ejemplo:

h1, h2, h3 {
margin-top: 20px;
margin-bottom: 10px;
}

ó

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333;
background-color: #fff;
}

Esto hace que se sobreescriba los estilos del mismo tema y en varios elementos no se tenga control sobre los estilos.

He implementado algunos cambios para intentar que no pase esto, como guardar el HTML como una plantilla y luego mostrarlo en el lugar que quiero con un shortcode, pero sigue repercutiendo en el sitio completo.

Cómo puedo hacer para que estos scripts y links solo afecten al elemento en el widget HTML personalizado y no en todo el sitio?

Agradezco cualquier sugerencia!