Sticky Header

Hi,

Please how can i set the transparency for the sticky header

https://cl.ly/c0245b

Thank you

Hello,

Enter the Heade Builder, configure each row https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Switch to the Color Tab and set the transparent background https://gyazo.com/c47d2f11eea925872a17d6adaf61ba41

Best Regards

Hi,

Thank you for your reply, i have tried it but it add color to the row. I want to achieve the same header on this page https://woodmart.xtemos.com/demo-fashion-colored/demo/fashion-colored/

Thank you

Hello,

Here are the settings: http://prntscr.com/m7fyx0 and http://prntscr.com/m7fz4v

You would better import the header and configure the elements as per your needs https://xtemos.com/docs/woodmart/header-builder/how-to-exportimport-headers/

You can find the header in the theme folder inc/demo-content/demo/header.json

Best Regards

Hi,

Kindly i’m still not able to achieve what i want. Below is my header

https://cl.ly/1d7bb4

And the sticky one looks Dar khttps://cl.ly/2f8d7d

I want the sticky header background to be white with Dark font.

At the same time i want to keep the light font for the regular header.

I appreciate if you could help me please.

Thank you,

I noticed for that for the sticky header to have a white background i need to make the Main HeaderText color scheme Dark the result would be like this

https://cl.ly/8b8150
https://cl.ly/1dc5c3

But that wouldn’t be nice as i have a full page slider so i the light header text.

At the same time on mobile version i have disabled the Revolution slider so I will need A Dark text.

I notice i can only choose either dark or light text main header for both mobile and desktop.

Is there a way to fix that.

and how can i achieve what i want to do.

Thank you

Hello,

The header has the Desktop view and mobile. https://xtemos.com/docs/woodmart/header-builder/header-responsive-settings/

And you can set light text in the desktop and dark in mobile. Hover the row and you will find the row settings option, switch to the Color tab https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

In the Color tab, you will find the background settings as well.

Best Regards

Hi,

Please can you help me on it cz i think there is a bug, whenever i change light/ dark font or hide on mobile settings it is also changes automatically on the desktop. They are not separate settings.

Thank you

Hello,

I am checking the site you have provided earlier it has not had the slider which is hidden on mobile. Please provide the site URL. If the site is under maintenance, please provide site admin access.

Best Regards

Hi Elise,

Thank you for your kind support,

Kindly find the login credentials in the private message.

Regards,

Hello,

I am a bit confused with the colors which you want to set. So, here is the code for the Sticky header background and text colors:

/*sticky background*/
body .whb-color-light:not(.whb-with-bg) {
    background-color: green;
}
/*sticky main menu color*/
body .whb-color-light .navigation-style-underline .item-level-0.current-menu-item>a{
color:yellow;
}
body .whb-color-light .navigation-style-underline .item-level-0>a{
color:yellow;
}
body .whb-color-light .navigation-style-underline .item-level-0>a{
color:orange;
}
body .whb-color-light .navigation-style-underline .item-level-0>a:hover{
color:yellow;
}
body .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:orange;
} 
body .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
color:yellow;
} 
body .whb-color-light .navigation-style-underline .item-level-0>a .nav-link-text:after {
    background-color: yellow;
}

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

body .whb-color-light .search-button:hover>a {
    color: yellow;
}
/*wishlist*/
body .woodmart-wishlist-info-widget .wishlist-icon {
color:orange;
}
body .woodmart-wishlist-info-widget .wishlist-count{
    color: red;
	background-color: yellow;
}
/*cart*/
body .woodmart-shopping-cart .woodmart-cart-icon {
color:orange;
}
body .woodmart-cart-design-5 .woodmart-cart-number{
    color: red;
	background-color: yellow;
}

Set the colors as per your needs and add this code to the Theme Settings > Custom CSS > Desktop

If you want other colors on mobile to add this code to the Theme Settings > Custom CSS > Mobile and change the colors for mobile.

Best Regards

Hi Elise,

Thank you for your help but honestly, i didn’t know how to achieve what i want with the code.

I tried the Header Logo Center https://cl.ly/b49adf with overlay header over content on desktop and i kinda reached 80% of what i want.

The sticky header looks great https://cl.ly/f69ab2 and i have no problem with it.

The main problem is with the Overlay header text https://cl.ly/9a60cf. How can i make the text of the Main Header and Header Bottom a light text, while keeping the same hover color?

I tried changing the Main Header and bottom header to light text but the sticky header background turns black and the text is dark.

Would you please help me with the code.

Thank you

Hello,

The home page has “Header Logo center 2” in the Custom Header. You have set the light color https://gyazo.com/3cd3ad3b0d6c49d6c14aae52e8b10955

I have cleared the cache and text color turned to white. As for the sticky header add the code provided below and replace the keywords with the color you need.

Best Regards

Hi,

Thank you for your support, but i can’t see the code in your message.

Thank you,

Hello,

Please have a look at the message above https://gyazo.com/eeffd8fd5e857e4d5a13d8e8003c876b

Best Regards

Hi,

Is there separate codes for Main Header and Header Bottom.

Hello,

The main and bottom rows are configured in the Header builder https://gyazo.com/01a864e5205912121c588658a76b9c1b

Best Regards

Hi,

It is getting a bit confusing, i know i can configure the text color in the builder. But when i make both the Main Header and Header Bottom. light text the sticky header background becomes black.

I think the code is missing something Because:

-If i make the adjustment it will make it to all headers used on the other pages and not only the homepage.
-The code only allows me to change the text color of one element which is the menu. For instance if I have the menu in light text and fixed the sticky header background to white then the text on the sticky header will not be visible because I have a white background and white text.

Is there a way to make the sticky header black with white background and the Main Header and Header Bottom white text.

Thank you

Hello,

You can set the default header for all the pages and have one for all, provided you have not set the custom header in pages, here is detailed information.

https://xtemos.com/docs/woodmart/header-builder/set-default-header-website/

and

https://xtemos.com/docs/woodmart/header-builder/set-different-header-specific-page/

Your home page now has the custom header Header Logo center 2

Now I see that you have not make the decision what header you want, you write:

#101951 -how can i set the transparency for the sticky header

#104116 I want the sticky header background to be white with Dark font.

#104120 You want the light on desktop and dark on mobile

I provide you the code so that you replace the keywords with the colors and inserted the code into Desktop and Mobile accordingly.

You write that sticky header is ok, you cannot change colors in the main header, after clearing cache all the colors are shown as per the settings.

Clarify your problem.

Best Regards

Please can i trouble you to adjust the code for me.

I want to keep the sticky header as shown in the picture as is. (Picture: Sticky Header)

I only want to change the Main & Bottom Header text color to white (Picture: Main & Bottom Header

I really appreciate that.

Thank you,

Attachments:

You must be logged in to view attached files.

Hello,

The main and bottom rows are configured in the Header builder https://gyazo.com/01a864e5205912121c588658a76b9c1b

Enter each row and set “Light”

Best Regards

Hi,

I know these settings, turning on both main and bottom rows to light will make the sticky header background black https://cl.ly/f7218e

I couldn’t see any way to change the sticky header text to dark with white background without affecting the the main & bottom row text colors.

In the code you provided when you change the text color to dark it applies automatically on the sticky header / Main header / Bottom menu.

Is there any way to adjust the code or add a snippet to change only the sticky header background color and text without affecting the main & bottom menu.

Thank you

Hello,

I know these settings, turning on both main and bottom rows to light will make the sticky header background black https://cl.ly/f7218e

Add this code I have provided for the sticky header and replace the color key word to the color you need

/*sticky background*/
body .whb-color-light:not(.whb-with-bg) {
    background-color: green;
}
/*sticky main menu color*/
body .whb-color-light .navigation-style-underline .item-level-0.current-menu-item>a{
color:yellow;
}
body .whb-color-light .navigation-style-underline .item-level-0>a{
color:yellow;
}
body .whb-color-light .navigation-style-underline .item-level-0>a{
color:orange;
}
body .whb-color-light .navigation-style-underline .item-level-0>a:hover{
color:yellow;
}
body .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:orange;
} 
body .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
color:yellow;
} 
body .whb-color-light .navigation-style-underline .item-level-0>a .nav-link-text:after {
    background-color: yellow;
}

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

body .whb-color-light .search-button:hover>a {
    color: yellow;
}
/*wishlist*/
body .woodmart-wishlist-info-widget .wishlist-icon {
color:orange;
}
body .woodmart-wishlist-info-widget .wishlist-count{
    color: red;
	background-color: yellow;
}
/*cart*/
body .woodmart-shopping-cart .woodmart-cart-icon {
color:orange;
}
body .woodmart-cart-design-5 .woodmart-cart-number{
    color: red;
	background-color: yellow;
}

I couldn’t see any way to change the sticky header text to dark with white background without affecting the the main & bottom row text colors.

Insert the code into the Theme settings > Custom CSS >

Replace yellow/orange/green for the colors you need.

Is there any way to adjust the code or add a snippet to change only the sticky header background color and text without affecting the main & bottom menu.

You have the code, just apply it.

Resume:

1. You need to configure the default header in the Header builder.

2. Apply the provided code for the sticky header.

Best Regards

Hi Elise,

So i have implemented the code as below, attached image is the outcome. I still can’t make the sticky header text dark. If i change the “white” in the below code to black then i have the Main header in black which i don;t want. I only need the sticky header text to be dark

What should i do?

/*sticky background*/
body .whb-color-light:not(.whb-with-bg) {
background-color: white;
}
/*sticky main menu color*/
body .whb-color-light .navigation-style-underline .item-level-0.current-menu-item>a{
color:#7AB38B;
}
body .whb-color-light .navigation-style-underline .item-level-0>a{
color:#7AB38B;
}
body .whb-color-light .navigation-style-underline .item-level-0>a{
color:white;
}
body .whb-color-light .navigation-style-underline .item-level-0>a:hover{
color:#7AB38B;
}
body .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:white;
}
body .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
color:#7AB38B;
}
body .whb-color-light .navigation-style-underline .item-level-0>a .nav-link-text:after {
background-color: #7AB38B;
}

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

body .whb-color-light .search-button:hover>a {
color: #7AB38B;
}
/*wishlist*/
body .woodmart-wishlist-info-widget .wishlist-icon {
color:white;
}
body .woodmart-wishlist-info-widget .wishlist-count{
color: white;
background-color: #7AB38B;
}
/*cart*/
body .woodmart-shopping-cart .woodmart-cart-icon {
color:white;
}
body .woodmart-cart-design-5 .woodmart-cart-number{
color: white;
background-color: #7AB38B;
}

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You have set both background-color white and color (this is the color of the text) is also white. Now the code has been corrected. Please check. Clean your cache.

Best Regards

Finally :), thank you a lot.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts