Hi,
Please try this code in your functions.php instead:

function custom_top_banner() { ?>
    <script>
(function($){
    $( "<div id='banner'>This is a banner</div>" ).insertBefore( "#header_meta" );
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_top_banner');

and this css instead:

.responsive #top #header > #banner {
    width: 100%;
    height: 30px;
    background: #ffff00;
    color: #000;
    text-align: center;
    z-index: 1;
    position: relative;
}
.html_header_top.html_header_topbar_active.html_header_sticky #top #main > .title_container {
    padding-top: 30px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Joseph,
Thank you for your question and the link to your pages, please give this a try, on your page with the form add a code block element at the bottom with this javascript:

<script>
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var carportSize = getUrlParameter('size');

if (carportSize != null) {
	var val = carportSize;
     var sel = document.getElementById('avia_6_1');
      var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}
</script>

Then on your page with the button make your link like this: your-site.com/form-page/?size=2%20Car%204%20Post the url parameter: ?size=2%20Car%204%20Post
needs to match your option text for the correct option to be selected

the spaces need to be replaced with &20

If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
In your Quick CSS the greater than symbol was not correct, typically this occurs when the code is copied from an email instead of the forum.

I corrected from you, please clear your browser cache and check.

Best regards,
Mike

Hi,
For all of the pages built like this, try this css instead:

.js_active #top #main > #av_section_1.av-minimum-height .container {
    opacity: 1;
    -webkit-transition: opacity 0s ease-in;
    transition: opacity 0s ease-in
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the test page, for two buttons opening two popups on the same page the code block should contain this:

<script type="text/javascript">
jQuery(window).load(function(){
jQuery('.avia-button-wrap.form-popup a.avia-button').addClass('form-popup-link');
  jQuery('.form-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });
});
</script>
<style>
.form-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
</style>


<div id="form-popup-one" class="form-popup mfp-hide">
form one
</div>

<div id="form-popup-two" class="form-popup mfp-hide">
form two
</div>

The button links should be #form-popup-one & #form-popup-two

and the button custom class should be form-popup

this results like this:

Now to add your forms you will create your forms with the shortcode wand in a Classic Editor post so you can copy the shortcode and paste it in the code block:

like this:

the result:

I made these changes to your page please clear your browser cache and check.

@mistermagoo8691 thanks for your feedback, I will check & correct it.

Best regards,
Mike

Hey Brolle,
Thank you for your question we don’t have a built-in popup element but we do have this solution to create a popup with a code block element. We can help adjust this to show your form, but we will need further information, such as what will trigger the popup a link or button? What kind of form is it, a contact form element or the shortcode from another plugin?
If you want to use a plugin rather than building this, WP Popups is a free plugin that seems to work well with Enfold.
If you don’t want to use a plugin, then try creating a test page and include admin login in the Private Content area below so we can help further.

Best regards,
Mike

Hi,
I see that you have removed the font-size css, but the letter-spacing css remains, since you can not find it please include an admin login so we can help you.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey prerules,
Thank you for your question, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#main a, #footer a {
    text-decoration: underline;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Changing the font of the button text also changing the size of the button, so for two different button sizes you could try this:

@media only screen and (max-width: 767px) { 
#top #main .avia-slideshow-button {
	font-size: 12px;
}
}
@media only screen and (min-width: 768px) { 
#top #main .avia-slideshow-button {
	font-size: 20px;
}
}

To have the button closer to the image in the caption H2, try this css:

@media only screen and (max-width: 479px) {
.responsive #top #main .slideshow_caption h2 {
    font-size: 0px !important;
    line-height: 0px;
    margin-bottom: 0px;
}
.responsive #top #main .slideshow_align_caption br {
	display: none;
}
#top #main .avia-slideshow-button {
	margin-top: 0px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
You could try this css but you’ll want to examine each page to ensure there are no conflicts

@media only screen and (max-width: 1023px) { 
	#top .flex_column_table,
	#top .flex_column_table_cell {
    display: block;
    width: 100%;
    margin-left: 0;
	}
}

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike