Hi,

Try adding this css code to adjust the padding of the black section.

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

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

  /* Add your Mobile Styles here */
  #top #main #av_section_2.avia-section .template-page {
    padding: 20px 0;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Try to use this css code to adjust the font size of the menu items inside the nav widget:

#top .widget_nav_menu li {
    font-size: 16px;
}

Best regards,
Ismael

Hey JennyGr,

Thank you for the inquiry.

You can use this css code to adjust the styte of the header and the breadcrumbs container on mobile view:

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .av-logo-container .widget {
    display: none;
  }

  #top #wrap_all .title_container .main-title {
    display: none;
  }

  .responsive .title_container .main-title+.breadcrumb {
    top: 10px;
    left: 0px;
  }

  .responsive #header_meta .sub_menu>ul>li {
    display: none;
  }

  .responsive #header_meta .sub_menu>ul>li:last-child {
    display: block;
  }
}

Best regards,
Ismael

Hey William,

Thank you for the inquiry.

Try to add this css code to decrease the default top margin of the flex column table container and make the spaces consistent on mobile view.

#top .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
    margin-top: 6px;
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

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

  /* Add your Mobile Styles here */
  .responsive #top .container .av-content-small,
  .responsive #top #wrap_all .flex_column,
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin-bottom: 8px;
  }

  #top .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
    margin-top: 0;
  }
}

View post on imgur.com

Best regards,
Ismael

Hey KatjaL,

The update to 7.1 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

Thank you for the screenshot.

Try to add this css code to adjust the height of the color section desktop view.

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */
  .no-touch-device .av-minimum-height-44vw:not(.av-slideshow-section) .container {
    height: calc(100vh - 342px) !important;
  }
}

Result after adding the modification:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the inquiry.

We tried deactivating the Solid Security plugin, but the site stopped loading on our end. Would you mind checking the issue on your end?

The notice _load_textdomain_just_in_time above should not affect the Advance Layout Builder.

Best regards,
Ismael

Hi,

That’s odd. We created a short clip showing how it looks on our end (see private field) — ignore the red background (that’s a custom modification while testing). You may also need to add this inside the previous css media query:

.responsive #top #main {
    margin-top: 0;
}

If you have time, you can also try @Guenni007’s suggestion above.

Best regards,
Ismael

Hi,

.main-title looks like a different font or font weight

Looks like the title is set to use a lighter font weight instead of the default 400. Did you configure the Heading elements in the Enfold > Advanced Styling tab? You can also adjust it with this css:

#top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .socket_color h1 {
    font-weight: 400;
}

Regarding the burger/mobile menu, try to edit the Main Menu (Icon) elements in the Advanced Styling panel, or use this css code:

#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.8em;
}

.html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover a, #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:hover {
    background-color: #333366;
    color: #ffffff !important;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Thank you for the update. Try adding this css code and let us know the result.

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
}

Best regards,
Ismael

Hi,

Thank you for the screenshots.

You can use this css code to create the desired layout. Add the image or icon as background of the ::after pseudo-element.

#top #header.av_minimal_header .main_menu ul:first-child > li > ul > li:first-child a::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: #5e504a;
}

#top #header.av_minimal_header .main_menu ul:first-child > li > ul > li:first-child a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 20px;
    background-image: url('your-image-url.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
}

Result:

View post on imgur.com

Best regards,
Ismael