Sticky Header for Magento 2

Configuration Settings

To access the settings, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Sticky Header

The module’s configuration contains three sections: General, Main Sticky (All Page) and Product Sticky (Product Page Only)

General

In the General section:

Set Enable the extension -  to "Yes", to enable the extension at the storefront. The "Main Sticky" will display on vertical scrolling of any page

Main Sticky (All Page)

On this section:

Enable Custom Logo? - If Yes, the custom logo will display on main sticky. Make sure to upload the logo image. Note: the custom logo will display on all devices with min-width equal to 767px

Logo Image - please upload the logo image, allowed file types: PNG, GIF, JPG, JPEG.

Hide "Main Sticky" On Mobile Devices? - if Yes, the "Main Sticky" header will be hidden on all devices with max-width equal to 767px

Product Sticky (Product Page Only)

On this section:

Enable Product Sticky - if Yes, the product sticky header will display on product page

Show "Main Sticky Header" On Product Page? - if Yes, the main sticky header will display on vertical scrolling of the product page

Show "Add To Cart" Button - if Yes, "Add To Cart" button will be shown on the product sticky

Show "Main Product Image" - if Yes, the main product image will show on the product sticky

Show "Product Thumbnails" - if Yes, the thumbnails images of the product will show on the product sticky

Maximum Number of Thumbnail to Show - enter the maximum number of the thumbnail to show on the product sticky. eg 4

Hide "Product Sticky" on Mobile Devices? - if "Yes", the product sticky will be hidden on all devices with max-width equal to 767px

Hide "Main Product Image" on Mobile Devices? - if "Yes", "The Main Product Image" will be hidden on all devices with max-width equal to 767px

Hide "Product Thumbnails" on Mobile Devices? - if "Yes", "Product Thumbnails" will be hidden on all devices with max-width equal to 767px

Hide "Add To Cart" Button on Mobile Devices? - if "Yes", "Add To Cart" button will be hidden on all devices with max-width equal to 767px

.um-main-sticky .sticky-header-nav-sections .navigation li.level0 > .level-top,
.um-main-sticky .sticky-header-nav-sections .navigation ul li a,
.um-main-sticky .minicart-wrapper .action.showcart::before{
    color: #000000;
}

.um-main-sticky .sticky-header-nav-sections,
.um-main-sticky .sticky-header-nav-sections .navigation {
	background: #F4F4F4;
}

.um-main-sticky .block-search .label::before,
.um-mobile-sticky .nav-toggle::before { 
	color: #000000;
}

.sticky-product { background: #F4F4F4;}

.sticky-product .sticky-detail .product-name-area .product-name,
.sticky-product .product-info-price .price-box .price-container .price,
.sticky-product .product-info-stock-sku {  color: #000000;}
.sticky-product .action.primary,
.sticky-product .action.primary:hover {
    background: #FF2B9E;
    border: 1px solid #FF2B9E;
    color: #FFF2F0;
}