Hey Yaphoon,

Thank you for the inquiry.

On the category page, items are displayed using the Portfolio Grid element, while the Masonry element is used on the Product page, which is they don’t look the same. If you want to adjust the style of the Portfolio Grid to make it look more like the Masonry element, try adding this css code:

#top.tax-portfolio_entries .no_margin.av_one_third {
    float: none;
    margin-right: 2%;
    width: 31%;
    margin-bottom: 2%;
}

#top.tax-portfolio_entries .grid-sort-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#top .grid-entry-title.entry-title {
    font-size: 1.2em;
    padding: 10px 13px;
}

Best regards,
Ismael

Hey Angelo,

Thank you for the inquiry.

In the EN version, you may need to edit the Text Block containing the embedded attachment and manually adjust the image URL.

<a href="https://www.site.it/wp-content/uploads/2022/07/23-495x400.jpg" class="lightbox-added" style="position: relative; overflow: hidden; display: block;">
    <img
        decoding="async"
        aria-describedby="caption-attachment-18987"
        class="wp-image-11154 size-portfolio"
        title="Toward Stafal"
        src="https://www.site.it/wp-content/uploads/2022/07/23-495x400.jpg"
        alt="Toward Stafal"
        width="495"
        height="400"
        srcset="https://www.site.it/wp-content/uploads/2022/07/23-495x400.jpg 495w, https://www.site.it/wp-content/uploads/2022/07/23-845x684.jpg 845w"
        sizes="(max-width: 495px) 100vw, 495px"
    />
    <span class="image-overlay overlay-type-image" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 409.062px; width: 513px;"><span class="image-overlay-inside"></span></span>
</a>

Currently, it is linked to this thumbnail:

https://www.site.it/wp-content/uploads/2022/07/23-495x400.jpg

Whereas the IT version links to the original version of the image:

https://www.site.it/wp-content/uploads/2022/07/23.jpg

Best regards,
Ismael

Hey dreamreader,
Your desktop header is using the option in the admin sidebar for Header visibility and transparency ▸ Header is invisible and appears once the users scrolls down this option doesn’t work for mobile.
You could try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
	#header.av_header_transparency {
		display: none;
	}
	#top #wrap_all #header.av_header_transparency ~ #main {
		padding-top: 0 !important;
	}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Your header is transparent the gray that you see is from the top color section on the page:

when the header is scrolled the #897270 color is from your Logo Area Color:

if you don’t want a transparent header change the setting on the page in the backend in the admin sidebar:

As for the header widget, I disabled the above css and added this:

@media only screen and (min-width: 990px) and (max-width: 1670px) { 
	#header_main .inner-container .widget .textwidget {
  	 margin-left: -196%;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1440px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 14px !important;
  }
}
@media only screen and (min-width: 1441px) and (max-width: 1670px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 18px !important;
  }
}
  #header_main .inner-container {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  align-content: center;
  }
  #header_main .inner-container .widget {
  	padding: 0;
  }
  #header_main .inner-container .widget .textwidget {
    align-content: center;
    height: 100%;
  }

please clear your browser cache and check.

Best regards,
Mike

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

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
@media only screen and (max-width: 767px) { 
	#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
	padding: 10px 6px;
	font-size: 10px;
}
}

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

Best regards,
Mike

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

@media only screen and (min-width: 1440px) { 
#top:not(.page-id-3288,.page-id-3593) #footer {
	display: none;
}
}
@media only screen and (max-width: 1439px) { 
#top #footer {
	display: none;
}
}

Best regards,
Mike

Hi,
To change the color of the burger menu icon on desktop try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-burger-overlay li li .avia-bullet, #top .av-hamburger-inner,#top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: red !important; 
  }

To adjust the width of the mobile menu go to Enfold Theme Options ▸ Main Menu ▸ Burger/Mobile Menu Styling ▸ Flyout Width

Best regards,
Mike

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

#top #main .iconbox_left_content .iconbox_icon {
    width: 100px;
    height: 100px;
}

Best regards,
Mike

Hi,
This assumes that you want the footer to show only on this page at screen sizes over 1440px, feel free to adjust to a different screen size if you wish.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 1440px) { 
#top:not(.page-id-3288) #footer {
	display: none;
}
}
@media only screen and (max-width: 1439px) { 
#top #footer {
	display: none;
}
}

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

Best regards,
Mike

Hey northorie,
To have a mobile menu when the header is transparent and change to the full menu on scroll for desktop screens, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

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

Best regards,
Mike

Hi,
Try the solution in this thread.

Best regards,
Mike

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

#tab-id-1-content .tab_inner_content {
	padding-top: 0%
}
#tab-id-2-content .tab_inner_content {
	padding-top: 4%
}
#tab-id-3-content .tab_inner_content {
	padding-top: 11%
}
#tab-id-4-content .tab_inner_content {
	padding-top: 18%
}
#tab-id-5-content .tab_inner_content {
	padding-top: 25%
}
#tab-id-6-content .tab_inner_content {
	padding-top: 33%
}
#tab-id-7-content .tab_inner_content {
	padding-top: 39%
}
#tab-id-8-content .tab_inner_content {
	padding-top: 46%
}
#tab-id-9-content .tab_inner_content {
	padding-top: 53%
}
#tab-id-10-content .tab_inner_content {
	padding-top: 60%
}
#tab-id-11-content .tab_inner_content {
	padding-top: 66%
}

you may need to adjust this a little, it the only solution I could think of.

Best regards,
Mike

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

#top .scroll-down-link {
	color: red;
}

adjust the color to suit.

Best regards,
Mike

Hi,
I’m not able to login to your site, but typically if you use the Advanced Layout Builder of posts then you manually need to add the post elements and add your excerpt in the manual excerpt box. This is by design to give you more control over what is shown. By design it is expected that posts are created with the basic WordPress editor and pages are created with the Advanced Layout Builder.
If you need further help please open a new thread so we can assist, as this is not your thread posting your admin login here will not be private and you will not see our comments in the Private Content area.
Please note that we ask that each thread stays on a specific topic, this helps other users and our Mods.

Best regards,
Mike

Hey northorie,
Try this solution.

Best regards,
Mike

Hey ipressen,
Thank you for your patience, to create a pricing table like this:

add these icon shortcodes into the table:

[av_font_icon icon='ue812' font='entypo-fontello' size='40px' position='center' color='green'][/av_font_icon]
[av_font_icon icon='ue819' font='entypo-fontello' size='40px' position='center' color='red'][/av_font_icon]

the top one is a checkmark, and the other is a minus.
This is how the backend looks:

I recommend showing the empty cells, otherwise the rows will move out of place:

Then this is the css I used in the Quick CSS to make the text black and make all of the cells the same height so they would line up and to “hide” the empty cells:

.pricing-table > li {
	font-size: 20px;
  line-height: 48px;
}
.main_color .pricing-table > li:not(.avia-heading-row,.avia-pricing-row) {
	color: #000;
}
.pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row {
	opacity: 0;
}
.pricing-table-wrap:nth-child(1) .pricing-table li.avia-pricing-row {
	opacity: 0;
}

Best regards,
Mike

Hey Meetx,
Please see the theme options at Enfold ▸ Accessibility ▸ Accessibility Support ▸ Accessibility Conformance Level and choose theme accessibility conformance level:

Then add a one of the plugins,

One Click Accessibility adds, among other things,
Enable skip to content
Add outline focus for focusable elements
please note that you must enable it in the plugin options, and for Advanced Layout Builder page you must manually add the skip to content ID for it to work.
The WP Accessibility seems to be better but you still need to set the options:

and I had to add this css for a outline focus for focusable elements:

a:focus {
  border:1px solid red !important;
  }

Perhaps I missed where to set this in the plugin options, but the skip to content & skip to menu worked well.
As for your question about H1, if you want your slider to be a H1 we can help, but typically people use a heading as a H1 because you only want one per page and sliders typically have many slides and headlines and the H1 doesn’t have to be the very top element, it can be the heading after the slider.
If you want to try making the menu keyboard tabbing work though menu skipping sub menu items unless down or up arrow keys are used you can try this solution

Best regards,
Mike

Hi,
Well do, to have a burger menu up to 1024px try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

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

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

Best regards,
Mike