Home › Forums › WoodMart support forum › Sticky header issue. Urgent response requested.

Sticky header issue. Urgent response requested.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 3, 2019 at 7:34 pm #116796

    jingyansu
    Participant

    Hello,
    I have a transparent sticky header. And i want it to be white after scrolled down. But when i define that color, trasparent goes away. and when i remove the color, it becomes black. How do i resolve it??

    Thanks in advance

    April 4, 2019 at 12:11 pm #116934

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    /*sticky background*/
body .whb-color-light:not(.whb-with-bg) {
background-color: white;
}
/*sticky main menu color*/
body .whb-sticked .navigation-style-default .item-level-0.current-menu-item>a{
color:#000000;
}
body .whb-sticked .navigation-style-default .item-level-0>a{
color:#777777;
}
body .whb-sticked   .navigation-style-default .item-level-0>a:hover{
color:#777777;
}
body .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:#777777;
}
body .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
color:#777777;
}

/*My Account*/
body .whb-sticked  .woodmart-header-links .item-level-0>a {
color:#777777;
}
body .whb-sticked   .woodmart-header-links .item-level-0>a:hover {
color:#777777;
}
/*Search*/
body .whb-sticked  .whb-color-light .search-button >a {
color:#777777;
}

body .whb-sticked  .search-button:hover>a {
color:#777777;
}
/*wishlist*/
body .whb-sticked  .woodmart-wishlist-info-widget .wishlist-icon {
color:#777777;
}

/*cart*/
body .whb-sticked  .woodmart-shopping-cart .woodmart-cart-icon {
color:#777777;
}
body .whb-sticked  .woodmart-cart-design-5 .woodmart-cart-number{
color: white;
background-color: #7AB38B;
}

    Best Regards

    April 4, 2019 at 2:13 pm #116975

    jingyansu
    Participant

    It worked. But i have another issue. The logo on the transparent header was white. But upon scrolling, it remains white, hence invisible. How do i change that?

    Please let me know.
    Thanks

    April 4, 2019 at 4:41 pm #117008

    Elise Noromit
    Member

    Hello,

    Please navigate to Woodmart > Header builder http://prntscr.com/iyd2pe

    Choose the proper header type (your current) http://prntscr.com/iyd333

    Upload a separate logo for sticky header https://xtemos.com/docs/woodmart/header-builder/setup-logo-image/

    Take into consideration that there is also the mobile view of your header http://prntscr.com/iyd3v3 check all the elements there.

    Best Regards

    April 4, 2019 at 9:13 pm #117076

    jingyansu
    Participant

    Thank you for your kind information. I have done it and i am still learning how to make use of your awesome header in a best possible manner. I have some strange problem. Some of my headers on mobile browsers are having a different color combination. and i can’t find a way to fix it. How do i adjust the color of each variation of a header,please?

    If you want to inspect; Header names are: Header Overlap and Single Product Page Menu

    I am also attaching some screenshots for your understanding. Kindly advice me how to fix this.

    Thanks

    Attachments:
    You must be logged in to view attached files.
    April 5, 2019 at 5:26 am #117105

    Elise Noromit
    Member

    Hello,

    Please switch the mobile view of your header http://prntscr.com/iyd3v3 check all the elements there.

    Best Regards

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