Home Forums Space themes support forum How to setup a different background color for sticky header

How to setup a different background color for sticky header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #563965

    alegarciajuarez23
    Participant

    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.
    #564320

    Luke Nielsen
    Keymaster

    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.

    #564546

    alegarciajuarez23
    Participant

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

    Attachments:
    You must be logged in to view attached files.
    #565237

    Luke Nielsen
    Keymaster

    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

    #565338

    alegarciajuarez23
    Participant

    Hi these are the credentials

    #565867

    Luke Nielsen
    Keymaster

    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

Viewing 6 posts - 1 through 6 (of 6 total)