Hey stephaniebLOS,

Thank you for the inquiry.

Did you modify the “All Headings (H1-H6)” element in the Advanced Styling panel as well? The current modification is overriding the custom styles for the H3 element. To apply the font-weight changes correctly to H3, consider removing the “All Headings (H1-H6)” modification or adding this code in the Quick CSS field.

#top #wrap_all .all_colors h3 {
    font-weight: 900 !important;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.

Best regards,
Ismael

Hi Jeannette,

Thank you for the feedback.

I will leave this topic open.

Enjoy the theme and have a great day.

Best regards,
Günter

Hi,

We can’t provide custom solutions like that unfortunately, since it would be out of scope of theme support. If you want to add the social icons to the burger menu, then please try following this thread: https://kriesi.at/support/topic/adding-social-media-icons-to-mobile-menu-on-mobiles-only/

Best regards,
Rikard

Hi,

Thank you for the update.

Adding this css code should adjust the space below the columns.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_column.av-aeojcb-ba774702a778e4ef03b33416445dc95a,
  .responsive #top #wrap_all .flex_column.av-f4v2wb-e42519b148782c16cb969eeccaa5f926 {
    margin-bottom: 20px;
  }
}

Best regards,
Ismael

Hey,

You have the following custom CSS code

#top #header_meta, #top #header_meta nav ul ul li, #top #header_meta nav ul ul a, #top #header_meta nav ul ul{background-color: #000000 !important;}

Please change it to the following:

@media only screen and (min-width: 768px) { 
#top #header_meta, #top #header_meta nav ul ul li, #top #header_meta nav ul ul a, #top #header_meta nav ul ul{background-color: #000000 !important;}
}

If you have any other questions, please start new threads under Enfold subforum ( https://kriesi.at/support/forum/enfold#new-post ).

Regards,
Yigit

Hey gatehealing,

Thank you for the inquiry.

Have you optimized the loading speed of the site? If you haven’t, please check the following articles for more info about site speed optimization.

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

To start, you can enable the Enfold > Performance > File Compression settings to compress scripts and stylesheets, which should reduce render-blocking resources. If you have already installed a cache plugin, consider enabling its default compression option or use Autoptimize.

Best regards,
Ismael

Hi,

Thank you for the clarification.

The logo is pushed a bit to the right because of this css code.

.responsive #top .logo .subtext {
    transform: translate(2%,-50%)!important;
    width: 235px!important;
}

Adjusting the transform/translate value should move the logo farther to the left.

.responsive #top .logo .subtext {
    transform: translate(-15%,-50%)!important;
    width: 235px!important;
}

And to adjust the size of the magnifying glass, please add this css code.

.responsive #top #wrap_all .menu-item-search-dropdown>a {
font-size: 42px;
}

Best regards,
Ismael

Hey Tia,

Thank you for the inquiry.

You can use the default lightbox feature in the theme to open an inline content. A few examples can be found in the following threads.

// https://kriesi.at/support/topic/popup-window-3/#post-1337540
// https://kriesi.at/support/topic/code-snippet-inline-post-content-popup-magnific-popup-shortcode/
// https://kriesi.at/support/topic/pop-up-feature/#post-1395322
// https://kriesi.at/support/topic/team-member-element-open-team-member-description-in-lightbox/#post-1354989

Best regards,
Ismael

Hi,

Thank you for the info.

We have adjusted the size of the header to 100px in the Enfold > Header Layout > Header Size / Header Custom Height settings. This is twice of the previous value or size. We also added the following css code to create some space around the logo.

.logo img, .logo svg {
    margin-top: 10px;
    max-height: 90%;
}

Please make sure to purge the cache before checking the page, or use incognito mode.

Best regards,
Ismael

Hi,

Thank you for the info.

Please follow this documentation to create a custom shortcode for the default search bar.

// https://kriesi.at/documentation/enfold/search/#search-bar-shortcode

You can then use that [avia_search] shortcode in the Navigation Label field of the new menu item beside the “SHOP & ORDER NOW” menu item. The menu items can be edited in the Appearance > Menus panel.

To adjust the size, position and appearance of the search bar, please use this css code.

#top #header #s {
    width: 100%;
    position: relative;
    padding: 11px 47px 11px 5px;
    z-index: 1;
    margin: 0;
    box-shadow: none;
    border-color: red;
    background-color: blue;
    color: green;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: green;
  opacity: 1; 
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: green;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: green;
}

Adjust the values as necessary.

Best regards,
Ismael

Hi,

Thank you for following up.

I looked at the website and it still looks corrupted.

You might have viewed a cached version of the page. The site seems to be displaying correctly on our end, aside from the logo which could use some adjustment.

.responsive .logo img {
    margin-top: 20px;
}

Best regards,
Ismael

Hey!

Another user provided a possible solution in the following thread: https://kriesi.at/support/topic/please-dont-close-theads-that-fast/

Best regards,
Ismael

Hi,
This is a duplicate thread of this one, that Rikard is also helping you with so we we close this one the avoid confusion.

Best regards,
Mike

Hi,

Glad to hear this helped the map issue, I see the your mega menu items are still column titles, have you tried to change them to regular menu items? Doing this will make the fonts size smaller and the width smaller, like this mega menu example:

unless you specifically only want to use column titles?
If so then try this css and adjust the font to suit:

#top #header .mega_menu_title,
#top #header .mega_menu_title a {
    font-size: 12px;
}

To make the meag menu smaller tru this css and adjust to suit:

#header .avia_mega_div.twelve.units {
    width: 602px;
}

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

Best regards,
Mike