How to setup a different background color for sticky header

Hello, I would like to have a different background color for the second row of the header when it is sticky, I see the way to have another logo but how can I configure a different background color?

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

The other color for the sticky header can be defined via custom CSS code, e.g. try the below one:

.xts-sticked .xts-header-main .xts-general-header {
    background-color: #f1c2c2;
}

Define it in Theme Settings -> Custom CSS.

• This reply was modified 7 months, 1 week ago by Luke Nielsen.

Thanks and how I can make the elements of the menu white?

Attachments:

You must be logged in to view attached files.

Hello,

At the moment I see that the site is in maintenance mode, could you please send me access to the admin panel in this case?

Thank you in advance.

Kind Regards

Hi these are the credentials

Hello,

Use the code below for help:

/* MENU\SHEVRONS */
.xts-sticked .xts-general-header :is(
  .xts-nav-main > li > a,
  .xts-nav-secondary > li > a,
  .xts-header-el span
),
.xts-sticked .xts-general-header :is(
  .xts-nav-secondary,
  .xts-nav-main
) > li > a:after {
   color: #FFFFFF;
}

/* STICKY MENU ITEM ICONS */
.xts-sticked .xts-general-header .xts-nav-img {
   filter: invert(1);
}

/* HEADER DIVIDER */
.xts-sticked .xts-general-header .xts-header-divider:before {
 border-color: #FFFFFF;
}

/* HOVER SECTIONS */

/* MENU\SHEVRONS */
.xts-sticked .xts-general-header :is(
  .xts-nav-main > li.current-menu-item > a,
  .xts-nav-main > li:hover > a,
  .xts-nav-secondary > li:hover > a,
  .xts-nav-shop-cat > li.xts-active > a,
  .xts-nav-shop-cat > li:hover > a,
  .xts-nav-mega > li:hover > a,
  .xts-nav-sticky-cat > li:hover > a
) {
  color: rgba(255, 255, 255, 0.8);
}

/* ACTIONS BUTTONS */
.xts-sticked .xts-general-header :is(.xts-header-el:hover .xts-header-el-icon,
.xts-header-el:hover .xts-header-el-label) {
  color: rgba(255, 255, 255, 0.8);
}

Thank you for your time.

Kind Regards

Hi, thanks it works perfectly on the desktop view, but how can I get the same result on mobile?, because on mobile, I first see the logo ok, but when the header changes to sticky layout the logo is not white so it is lost with the background color

Check the screenshot with the comparison, please

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the full access for the admin panel – https://take.ms/LHN24

Thank you in advance.

Kind Regards

These are my admin cred

Hello,

Thank you for your time.

It seems that access is invalid – https://take.ms/fHoMT

Please update it and let me know.

Kind Regards

Hello please try again with my new credentials

Hello,

You need to set a white logo for mobile in Header Builder – Logo image for sticky header as shown on the screenshot https://monosnap.com/file/Q04GABvCYbPJjZkOcuHG3bwZwSeC4L

Kind Regards

[Author]

Posts