Hi,

Please try this CSS as well:

#menu-item-764 {
  background-color: red;
}

#menu-item-920, #menu-item-988 {
  margin-top: 15px;
}

#header_meta #sub_menu {
  margin-top: -11px;
}

Best regards,
Rikard

Hi,

We adjusted the css code to accommodate various column sizes and maintain a maximum content width of 1400px.

#top #gridtest {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

#top #gridtest > .av-gridrow-cell {
  box-sizing: border-box;
}

#top #gridtest .flex_cell_inner {
  margin: 0 auto;
}

#top #gridtest .av-gridrow-cell.no_margin.av_one_fifth {
  flex: 0 0 20%;
  max-width: 280px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_two_fifth {
  flex: 0 0 40%;
  max-width: 560px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_three_fifth {
  flex: 0 0 60%;
  max-width: 840px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_four_fifth {
  flex: 0 0 80%;
  max-width: 1120px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_full {
  flex: 0 0 100%;
  max-width: 1400px;
}

@media (max-width: 768px) {
  #top #gridtest > .av-gridrow-cell {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

Best regards,
Ismael

Hey Kelly,

Thank you for the inquiry.

Try to add this css to adjust the default top margin of the SVG icons in the header:

#top .social_bookmarks li.avia-svg-icon img[is-svg-img=true], #top .social_bookmarks li.avia-svg-icon svg:first-child {
    height: 1em;
    width: auto;
    margin-top: 3px;
}

Then include the following to realign the SVG icons with the font icons inside the content container:

#top #main .avia-svg-icon.avia-font-svg_entypo-fontello svg:first-child {
    stroke: unset!important;
    top: 8px;
    position: relative;
}

Result:

We recommend uploading a similar custom SVG icon for the instagram icon to fix the alignment issue.

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

We replaced the shortcode with the Widget Area element displaying the Instagram widget. It’s now rendering, but returning the error: Instagram returned error 429. Are you using the Instagram widget on other sites as well? Please try waiting a few hours or a full day, then check the page again. We have set it to cache the Instagram images on your server.

These threads might be related to the issue:

— https://kriesi.at/support/topic/enfold-theme-instagram-side-bar-widget-not-working/#post-1350365
— https://kriesi.at/support/topic/problem-with-instagram-widget/

Best regards,
Ismael

Hi,

Thank you for the update.

We removed the previous modifications because they conflicted with the current ones and updated the code slightly. This should center the logo, position the burger menu on the left and place the social icons on the right. In mobile view, it will revert back to the default layout, with the logo on the left, the burger menu on the right and the social icons hidden. This should also set the default color of the burger menu and social icons to white on transparent headers.

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

  /* Add your Desktop Styles here */
  .html_header_top #top .av_logo_right .logo {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 9;
  }

  .responsive.html_logo_right #top #wrap_all .av_mobile_menu_tablet .main_menu {
    width: 100%;
    display: flex;
  }

  #top #wrap_all .social_bookmarks,
  #top #wrap_all .social_bookmarks a,
  #top #wrap_all .social_bookmarks li {
    margin-left: auto;
  }

  .header_color.av_header_transparency .av-hamburger-inner,
  .header_color.av_header_transparency .av-hamburger-inner::before,
  .header_color.av_header_transparency .av-hamburger-inner::after {
    background-color: #ffffff;
  }

  #top .av_header_transparency .phone-info, #top .av_header_transparency .social_bookmarks li a {
    color: #ffffff;
  }
}

Desktop:

Mobile:

Best regards,
Ismael

Hey AgenturLanzinger,

Thank you for the inquiry.

Adjusting the background position a bit should help. Please try to add this css code:

.responsive #top #wrap_all .av-flex-cells .no_margin {
    background-position: 50% 100%;
}

Result:

Best regards,
Ismael

Hi,

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

Best regards,
Rikard

Hi,

@mistermagoo8691: Please continue here: https://kriesi.at/support/topic/difference-between-a-template-and-a-custom-element/

Best regards,
Ismael

Hi,

Thank you for the update.

Please look for this css rule:

.html_header_top #top .av_logo_right .logo {
  right: calc(50% + -35.5px);
}

Replace it with:

.html_header_top #top .av_logo_right .logo {
    right: 50%;
    transform: translateX(50%);
}

Best regards,
Ismael

Hey koomo,

Thank you for the inquiry.

If you need to remove the arrow below the images, please add this css code:

#top .avia-smallarrow-slider .avia-content-slider-inner .avia-slideshow-arrows {
    display: none;
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

If you want to revert to using the default icon, please remove the previous modifications, then add this css code to enlarge the instagram icon and adjust the color:

#top #wrap_all .social_bookmarks .social_bookmarks_instagram a {
    background: linear-gradient(44deg, #ef1a88, #e6683c, #fa991f, #ee166c, #bc1888);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 50px !important;
    width: 100%;
    height: 100%;
    line-height: 80px;
}

.responsive #top #header .main_menu .social_bookmarks {
    margin-top: -40px !important;
    overflow: visible;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

If you need the logo centered and the burger menu on the left, try setting the Enfold > Header > Header Layout > Menu and Logo Position to Logo right, Menu left. Then add the following css code to move the logo from the right to the center.

.html_header_top #top .av_logo_right .logo {
  right: calc(50% + -35.5px);
}

@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header_main .main_menu {
    left: 0;
    right: auto;
  }

  .html_header_top #top .av_logo_right #header_main .logo {
    position: relative;
    left: 50%;
    right: auto;
    margin-left: -41.5px;
    margin-right: 0;
  }
}

Best regards,
Ismael