WoodMart Theme Setup Sticky Header with Transparent Menu Tutorial

Use the WoodMart themeBuild a websiteWhen the time comes, many people want to keep the menu at the top when scrolling and show a transparent visual effect at the top of the page. This design will look more advanced and also enhance the overall visual hierarchy. This article will take you step by step through the process of making a sticky header with aTransparent menuThe settings are easy for newbies to handle without writing code.

I. What are sticky headers and transparent menus?

• tackinessfooter(Sticky Header): When the user scrolls down the page, the top navigation bar will always be fixed at the top of the screen for quick navigation.
• Transparent menu: The menu bar itself does not have a background color, the background is displayed directly on the top image of the page or other content, usually used for the home page big picture scene, the visual effect is more modern.

II. Preparatory work

Make sure you're using the latest version WoodMart ThemesThe built-in Header Builder has been enabled. This feature supports custom header layouts, including sticky and transparent effects.

Enter the backend path:

WordPress Backend > WoodMart > Header Builder

III. Enabling sticky headers

• Open Header Builder editor (software)The
• In the Structure view, select the header layout you are currently using.
• Locate the settings area corresponding to the top area (Top / Main) and click to open the settings panel.

• In the "Sticky" option select "Stick on scroll" or "Slide after scrolled down" (depending on the choose whether to always be sticky or only appear after scrolled down).
• Click Save and refresh the page to preview.

Fourth, set the transparent menu effect

Transparent menu usually applies to the home page with a large picture at the top of the scene, if the menu bar is not transparent, it will cover the background picture, affecting the beauty. The setting method is as follows:

• In the Header Builder, select the current main navigation area.

• Open the background settings and select "Transparent" or turn the background color transparency to 0.

• Then, in the page editor (e.g. using the Elementor maybe WPBakery), make sure you're adding a full-width background image to the first screen of the home page and set it below the content layer.

• If you need a transparent menu for the home page, you can use "Conditional Display" in Header Builder to enable the transparent menu for the home page only, and keep the default style for other pages.
• After designing, click PublishDisplay Conditions. The Display Conditions setting pops up:

Fifth, optimize the navigation text and LOGO color

Because the background is transparent.navigatorMenu text and logo may not be visible on light background if they are dark colors. The solution is as follows:

• Add an additional CSS class to the home page, such as .transparent-header.;
• Define the color (e.g. white) of the navigation text and logo under this class;
• You can switch the logo image with the "Sticky" state, so that the style before and after the scrolling is unified.

Example CSS:

.transparent-header .site-logo img {
  content: url('path/logo-white.png');
}

.transparent-header .main-nav > li > a {
  color: #fff; }
}

VI. Troubleshooting common problems

• Ineffective navigation stickiness? Check if the sticky feature is disabled on mobile or conflicts with certain plugins.
• Transparency effect not working? Verify that the background of the area where the navigation bar is located is not set to transparent, or is covered by another layer style.

VII. Summary

WoodMart provides a powerfulCustomizable HeaderFunctionality, the visual effect of sticky and transparent navigation can be easily realized without third-party plug-ins. Reasonable layout, together with the detail design of the homepage big picture and scrolling switch, can create a professional and advanced website experience.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off