Hi,

Great, I’m glad that you found a solution. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thank you for the update.

We created a private test page (see private field) and edited the modification in the Quick CSS field a bit to display the border.

/*------------------------------------*/
/*             For button in slider               */
/*------------------------------------*/
#top .avia-slideshow .avia-caption-content  .av-slide-button {
    text-transform: uppercase;
    letter-spacing: 1px;
    border-width: 1px;
    color: #fff;
    background-color: #006f49;
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    border: 1px solid #ffffff;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You may need to update the content of the table cells and include the number of persons beside the price. For example, you can adjust the content of the first cell in the Professionisti column using the following code:

<span class="av-desktop-hide av-medium-hide av-small-hide">1 Person</span> 90 euros

This will display the price as “90 euros” on desktop view and add the extra info “1 Person” beside the price on smaller screens.

Best regards,
Ismael

Hey dondela,

Thank you for the inquiry.

It’s possible but it might leave huge gaps or spaces around the gallery items. You can try this css code to adjust the width of the 6th and 7th items in the gallery.

#top #wrap_all .avia-gallery .avia-gallery-thumb a:nth-child(6) {
    width: 30%;
}

#top #wrap_all .avia-gallery .avia-gallery-thumb a:nth-child(7) {
    width: 50%;
}

Have you tried using the Masonry Gallery element instead?

Best regards,
Ismael

Hey jun san,

Thank you for the inquiry.

You can add this css code to adjust the position and styles of the submenu.

#top .av-main-nav ul ul {
    left: 207px;
    top: 0px;
    margin: 0;
    border-top-style: solid;
    border-top-width: 1px;
    padding-top: 0px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the style of the social icons, you can use this css code.

#top #header_meta .social_bookmarks li a {
    float: left;
    width: 30px;
    line-height: 30px;
    display: block;
    margin: 0px;
    outline: none;
    padding: 0;
    min-height: 30px;
    height: 100%;
    overflow: visible;
    z-index: 2;
    position: relative;
    text-align: center;
}

Would you mind providing a screenshot of the issue? Or post the site URL in the private field so that we can check the current header layout and settings.

Best regards,
Ismael

Hey mulder4301,

Thank you for the inquiry.

Ich habe im Quellcode ausgelesen dass die ID und NAME dieses Feldes avia_1_1 ist. Kann ich damit was anfangen?

Yes, you can use the ID or classname to adjust the style of specific fields in the contact form element. To adjust the style of the first field for example, you can use this css code.

#top form fieldset #element_avia_1_1 input {
    background-color: #cc1818;
    color: #ffffff;
}

Best regards,
Ismael

Hi,
Sorry I thought you were talking about the text showing though, If you feel that this css works for mobile then you should wrap it in a media query so it only works on mobile, like this:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
position: absolute !important;
right: 0px !important;
}
.responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
position: absolute !important;
right: -45px !important;
}
}

Best regards,
Mike

Hey envis,
Is your screenshot from your Google Site Kit plugin? I am not familiar this this plugin or this screen. Try checking the plugin documentation or asking their support, perhap the plugin is looking for a specific class to be clicked? Or perhaps it doesn’t track logged in users?
When I check your contact form it gives the success message and I don’t see any error in the browser console, so it doesn’t seem to be a javascript error.
Typically the gtag function that I have seen people use is like this from their documentation

function gtag_report_conversion(url) {
     var callback = function () {
     if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
      'send_to': 'TAG_ID/CONVERSION_LABEL',
      'value': 1.0,
      'currency': 'USD',
     'event_callback': callback
  });
return false;
}

and on the same documentation page it has examples for on-click triggers, this is a jQuery example for a form plugin button:

(function($) {
    setTimeout(function(){
$('#top.page-id-120 #nf-field-29').click(function() {
    gtag_report_conversion('https://your-site.com/client-sign-up/');
	console.log('gtag_conversion_triggered');
});
},900);
}(jQuery)); 

Best regards,
Mike

Hey web4698,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu .av-main-nav-wrap {
	background-color: #fff;
}

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

Best regards,
Mike

Hi Franz,

Please try the following in Quick CSS under Enfold->General Styling:

#scroll-top-link {
  right: 60px;
  bottom: 60px;
}

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey keeslamper,
According to the Scroll Snap Model you need to use the scroll-snap-type property and the overflow needs to be scroll. I’m not very familiar with all of the settings for the elements or the parent elements, it is not used in the theme, but this article may help.
A few points that I found is that scroll-snap will not work with a fixed header and the scroll-snap-type & overflow needs to be on the html like this:

html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
#main > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

But I believe that the smooth scroll js interfere with this css. I have ask the rest of the team for advise, Thank you for your patience.

Best regards,
Mike

Hi,
I added this css and it seems to have solved the issue, please clear your browser cache and check.

@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    height: 47px;
}
}

Best regards,
Mike

Hey cpages,
Thank you for pointing this out, please use this css instead:

/************************************

Logo left, Widget center, widget right, menu below

*************************************


CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/


/*--------------------------------

» Initiate Flexbox

--------------------------------*/


/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta, 
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget:nth-child(3),
.responsive #top #header #header_main .inner-container .widget:nth-child(4),
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {
    display: flex;
    position: relative;    
}





/*--------------------------------

» Topbar

--------------------------------*/


/* Top bar */

.responsive #top #header #header_meta {
    flex-basis: 100%;
}




/*--------------------------------

» Header

--------------------------------*/


/* Height outer container */

#top #header #header_main .container.av-logo-container {
    /* Do not change height here */
    /* Auto height: Header takes the height of the contents */
    height: inherit;    
    line-height: inherit;
}



/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
    /* Define header height here */
    height: inherit;
    position: relative !important;
    flex-wrap: wrap;
    /* Define header padding */
    padding: 10px;
    justify-content: space-between;
}



/* Wrappers 
--------------------------------*/


/* Main header ( logo, menu, widgets ) and topbar */

.responsive #top #header {
    flex-wrap: wrap;
}


/*  Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;
}


/* Transparent header 
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
    position: absolute;
}

@media only screen and (max-width: 767px) {
    .responsive.html_header_transparency #top #wrap_all #main {
        /* Define padding value for transparent header in mobile */
        /*padding-top: 315px !important; */
    }
}


 


/* Fixed header 
--------------------------------*/

.html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,
.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header {
    position: fixed;
}

.html_header_sticky #top #header_main .container,
.html_header_sticky #top .main_menu ul:first-child>li a {
    height: inherit !important;
    line-height: inherit !important;
}


/* Main content padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main,
.html_header_sticky #top #wrap_all #main {
    /* Define padding only if sticky header is active */
    /*padding-top: 262px ;  */
}

@media only screen and (max-width: 767px) {
    .html_header_sticky #top #wrap_all #main {
        /* Define padding value for sticky header on mobile */
        /*padding-top: 315px !important; */
    }
}






/*--------------------------------

» Logo

--------------------------------*/


/* Logo */

.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: 33%;
    /*width: auto;*/

    /* Define scalable min width of the logo on small screens */
    min-width: 100px;
    
    z-index: 9;
    /* Define scalable max width of the logo on big screens */
    /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
    max-width: 180px;
}


/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
    width: auto;
        
    /* Height specification is not required. It is proportional to the max width of the logo */
    height: auto;    
    align-items: center;
    align-self: center;
    justify-content: center;
}


/* Vertically center transparency logo */

.responsive #top #header .logo span img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



/*--------------------------------

» Menu

--------------------------------*/


/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 5;

    /* Define menu width */
    flex-basis: 100%;

    align-items: center;
    align-self: center;
    height: inherit !important;
    background: #f1f1f1;
    justify-content: center;
    margin-bottom: 20px;
}


/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}


/*  Activate burger menu  */

@media only screen and (max-width: 1100px) {
    #top #header .av-main-nav>li.menu-item {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

@media only screen and (max-width: 767px) {
    /* Mobile menu position fix */
    .responsive #top .av-logo-container .avia-menu {
        display: flex!important;
        align-items: center;
    }
}



/* Mega menu submenu position fix */

.responsive #top #header .avia_mega_div {
    /* Define megamenu submenu top value */
    /*   top: 300px; 
   position: fixed;
   left: 50%;
   transform: translateX(-50%);*/
}



/*--------------------------------

» Widget

--------------------------------*/


/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    flex-basis: auto;
    padding: 0;
    clear: none!important;

    justify-content: center;
    align-self: center;
    align-items: center;
    z-index: 1;
    margin: 0 10px;
}


.responsive #top #header #header_main .inner-container .widget>div {
    width: 100%;
    line-height: 14px;
    padding: 0 10px;
    background: gold;
}

/* Widgets areas */
.responsive #top #header #header_main .inner-container .widget:nth-child(3){
    order: 3;
    flex-basis: 33%;
}
.responsive #top #header #header_main .inner-container .widget:nth-child(4){
    order: 4;
    flex-basis: 33%;
}

/*--------------------------------

» Social icons

--------------------------------*/


/* Flex support and position fix */

.responsive #top #header #header_main nav .social_bookmarks {
    top: auto;
    margin-top: 0;
    align-items: center;
}


/* Inherit height for flex alignment */

.responsive #top .av-logo-container .social_bookmarks li {
    height: inherit;
}





/*--------------------------------

» Search 

--------------------------------*/


/* Your styles here */


/*--------------------------------

» Cart 

--------------------------------*/


/* Cart position fix */

#top #header #header_main #menu-item-shop a.cart_dropdown_link {
    height: auto;
}

@media only screen and (max-width: 767px) {
    .responsive #top #menu-item-shop.cart_dropdown {
        display: flex;
        align-items: center;
    }
    .cart_dropdown .dropdown_widget .avia-arrow {
        display: none;
    }
}

We will correct the documentation.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey northorie,
Typically a sticky header would be achieved with this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

but if you only want a sticky burger icon you could try this:

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header .av-burger-menu-main {
    position: fixed;
  }
}

If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hey dmooredesign,
To display your CPT, try adding this to your child theme functions.php:

add_theme_support('add_avia_builder_post_type_option');
add_theme_support('avia_template_builder_custom_post_type_grid');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
See this thread.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 989px){
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
}
.responsive #top #main {
    margin-top: 0;
}
}

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

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-472 #main .main_color .avia-data-table * {
	border: none;
	background-color: #fff;
	font-size: 18px;
	text-align: left;
}
#top.page-id-472 .main_color .avia-data-table.avia_pricing_minimal th {
    color: #009bdd;
    width: 10%;
}

Best regards,
Mike