Sticky element

Hey sitadi,
The login to the live site is not working, but for the test site the search is sticky but seems to be in the wrong position when the header when it shrinks,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#header.header-scrolled ~ #main #av_section_1 .avia_search_element {
top: -64px;
position: relative;
}
#header ~ #main #av_section_1 .avia_search_element {
top: -30px;
position: relative;
}

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,

You can try this css code to adjust the display of the header on mobile view:

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

  /* Add your Mobile Styles here */
  .responsive #header_main .container {
    height: 130px !important;
  }

  #top .avia_search_element.av-m8j6ucsp-f1ed25db4fcf2e1d4ba1dd7653626aed #s.av-input-field {
    line-height: 33px;
    height: 33px;
    color: #bed028;
    font-size: 14px;
  }

  #top #searchform_element {
    margin-bottom: 0;
  }

  #top .avia-section.av-m8h8o2m6-a6ff6f0926c56ce5cb244fa93948b320 {
    background-color: transparent;
    background-image: unset;
    margin-top: 5px;
    margin-bottom: 0px;
    position: absolute !important;
    margin-top: 0;
    z-index: 5000;
    margin-top: -40px;
  }

  #top .av-main-nav-wrap ul {
    margin: 0;
    padding: 0;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Could you provide a screenshot of the issue? We tried logging into the site, but the account details above are incorrect. Please provide another login account so we can check the live site.

Best regards,
Ismael

Hi,

Thank you for the update.

Instead of placing the search widget inside a Color Section, try inserting it directly into the header using a widget or widget area. Please refer to this documentation for more info.

— https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

This is the html of the search element, which can be placed inside a Text widget: https://pastebin.com/K8x7qu9g

Best regards,
Ismael

Hi,

Yes, you can add conditions to the widget area snippet:

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );

function enfold_customization_header_widget_area() {
    if ( is_page( 'contact-us' ) ) {
        return; 
    }
    dynamic_sidebar( 'header' );
}

Just replace “contact-us” with the slug or ID of the page, or use an array of IDs if you need to exclude multiple pages.

— https://developer.wordpress.org/reference/functions/is_page/

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike