Hi,

Thank you for the update.

You can add this css code to hide the overlay on hover.

#top .av-caption-style-overlay .av-masonry-item-with-image:hover .av-inner-masonry-content {
    background: transparent;
}

Best regards,
Ismael

Hey ausgesonnen,

Thank you for the inquiry.

Did you any modifications for the header? To remove the other burger icon, you can try this css code.

#top #header .av-logo-container .av-main-nav > li.av-burger-menu-main {
    display: none;
}

Best regards,
Ismael

Hi,

@northorie: Have you tried adding the css code that @Guenni007 provided above? We will post it again below. If you need further assistance, please open another thread, provide the site URL and post a screenshot. We will close this thread for now.

@media only screen and (min-width: 990px) {
  #top .flex_cell.responsives-verhalten.nebeneinander  {
    background-attachment: scroll;
    padding: 0 !important
  }

  #top .flex_cell.responsives-verhalten.nebeneinander .flex_cell_inner {
    height: calc(56.25vw / 2) !important;
  }
}

Best regards,
Ismael

Hi,

Thank you for the info.

To adjust the padding of the Color Section, please edit the element, go to the Layout > Margins & Padding section, then set the Section Padding settings to No Padding.

You can also add the following css code to adjust the default section padding but this modification will be applied across the site.

.content {
    padding-top: 0;
    padding-bottom: 0;
}

.avia-testimonial-wrapper {
    margin: 0;
}

Best regards,
Ismael

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,

Why is it not recommended to have transparent header/logo on mobile?

Transparent or fixed headers on desktop are used to enhance site navigation by keeping the main menu accessible while scrolling. However, on mobile devices, users can easily return to the top of a page or site with double taps and other mobile phone gestures, making fixed headers unnecessary. Also, fixed headers consume space that is better allocated for actual site content, and they can also be distracting.

If you want to continue, you can add the code in the Enfold > General Styling > Quick CSS field or in the child theme’s style.css file.

Best regards,
Ismael

Hey imagestudios,

Thank you for the inquiry.

Looks like you’ve managed to apply gray scaling to the masonry items with this css code.

#top .av-hover-overlay-grayscale .av-masonry-entry .av-masonry-image-container {
    filter: grayscale(1);
}

To adjust the overlay color, try this css code.

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,87,130,0.3);
}

Best regards,
Ismael

Hi,
Try finding this css that you added:

.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: 30%;
    min-width: 100px;
    max-width: 180px;
    z-index: 9;
}

and change the max-width to suit, such as 250px like this:

.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: 30%;
    min-width: 100px;
    max-width: 250px;
    z-index: 9;
}

but note that the larger the logo is the more it will push down the menu, please see the screenshot in the Private Content area that displays the flex grid for the header to help explain.

Best regards,
Mike

Hi,
I believe that you are asking how to center the man holding umbrella image that is in your grid row:

in your grid row background image you would choose the background image position of Top Center:

so the image will be centered left & right and the top of the image will show:

or you can choose Center Center if you don’t care if the top of the umbrella shows.

Best regards,
Mike

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

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

#top.page-id-1941 .av-masonry-entry {
	pointer-events: none;
}

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

Hey Angelo,
Try adding this solution to create social icons shortcode that you can add to a widget in your sidebar.

Best regards,
Mike

Hey ballindigital,
To edit the menu item Description, first enable them in the drop down at the top of your menu screen “Screen Options” and checking the Description box, which will show the Description text area below your menu items.


I have enabled this for the login you posted, if you are using a different login you will need to enable this.
To make the menu burger white 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: #fff !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

Hey ausgesonnen,
It is the background color of the element, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-video-slide .avia-slide-wrap, #top .av-video-slide iframe {
    background: #fff;
}

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

Best regards,
Mike

Hey aboderc,
Thanks for the link to your page, I see that you have a square with a code block that seems to have woo product shortcode, but the problem is that the code block has a shortcode for a three column product

so the css for this gives it a width of 18%, this is why the product is to the top left, not because of the code block.
Try this css:

#top.home .products.columns-3 .product {
	width: 100%;
	margin: auto;
}

Your other two products have a two column woo code so they are to the left because their width is only 49.5%

for them try this css:

#top.home .shop_columns_2 .products .product {
	width: 100%;
	margin: auto;
}

Lets us know if this helps.

Best regards,
Mike

Hi,
I see a square with a arrow for going to the top in the Parallax Demo :

to enable this for mobile try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px){
.responsive #top #scroll-top-link {
    display: block;
}
}

Best regards,
Mike

Hi,
Try adding this css:

@media only screen and (max-width: 690px) and (orientation: landscape){
.responsive #top #wrap_all #main {
    padding-top: 182px !important;
}
}

ensure that you clear your phone cache before testing, if this doesn’t help please include your phone screen resolution for portrait and landscape.

Best regards,
Mike

Hi,
The css classes .site-header & .top-bar are not typical for Enfold, I would recommend this css:

#header_meta .container {
min-height: 60px;
}

#header_meta .container * {
font-size: 16px;
}

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.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike