How to extend the hero section image to the main navigation menu

Hi,
Please check out the video in the private section. I look forward to hearing from you soon.

Hi, please see the updated information on this problem. I look forward to your reply. Thank you.

Hello hey3212,

Thanks for reaching to us.

1. Gap below header

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

div.main-page-wrapper {
	margin-top: 0;
	padding-top: 0;
}

header.whb-header{
	margin-bottom: 0;
}

2. Extending space of menu

The width of menu is already be full-width https://prnt.sc/nFEh3j3zBKYj

3. Hovering effect

Are you want to display menu in transparent background and the background is about to change when hovering on it?

Regards,

Hi,

Thanks for the codes for 1. For 2 and 3, I meant to extend the pink color of the main image to the navigation bar. If you come to http://www.skims.com, you will see their main navigation bar background color is grey the same color as the main image below the bar, and that bar only changes to color white when scrolling or hovering. See attached. Also refer to my video. How to make this effect? I want my navigation bar to take the same pink color as my image below and only changes to white when scroll and hover.

Attachments:

You must be logged in to view attached files.

Hello hey3212,

Unfortunately, it requires complicated customization to make it work, which is out of our basic support.

Thanks for understanding our limitations. Let me know if you have any questions.

Kind Regards

I see. No worries. I am asking because I know Elementor can realize these functionalities. But, I am happy to work with what you already have. Thank you.

Hi hey3212,

Thank you for your kind words.

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

Hi,

you provide the codes below which solved the problem of margin on the front page. But after this, all page top margins (the margin below the main navigation) have disappeared. Could you amend it to just eliminate the home page margin?

div.main-page-wrapper {
margin-top: 0;
padding-top: 0;
}

header.whb-header{
margin-bottom: 0;
}

Hi dharmin.patel.verz,

Please remove previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

body.home .main-page-wrapper {
	margin-top: 0;
	padding-top: 0;
}

body.home .whb-header{
	margin-bottom: 0;
}

Regards,

Thank you. It worked like a charm!

Hi hey3212,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts