You can enhance your sites branding and make it stand out more using a background image in the menu.
Set the background image
To set this, visit Customizer > Header > Design > Header Background > Circle > Image > Select Image
Additional properties can be set once the image is selected, to repeat (tile), change the center point, resize, and add a scroll effect.
Note that this can change based on the view selected, with different options for desktop, tablet and mobile:
In general, we recommend minimizing the number of changes per display and have everything consistent.
Background per menu row
Kadence has a 3-row display by default, and the custom background image can be set for each row individually.
Note that these can also be changed for desktop vs. tablet/mobile display, but too much customization can cause pagespeed and layout issues, so use discretion in how much customization you're doing. We strongly recommend using just a single well optimized background across all devices.
Video
Tips for success
- use a transparent background image (.png) with low contrast to avoid overwhelming the text, thereby making it illegible
- use a logo with a transparent background (.png) to allow the logo to show through
- this image can add a significant amount of downloading and rendering to browsers, which will impact pagespeed scores, so extreme discretion and image optimization is necessary to avoid problems that can impact RPMs
- optimize the menu for mobile display, which accounts for 80% of most content sites pageviews
- selecting too many separate options for desktop, tablet and mobile can bloat your site with CSS and cause pagespeed issues, so use this sparingly
- scroll effects must respect accessibility standards that disable animations
Support
Using the Kadence customizer creates a custom theme that we're not able to provide support for. Our support is here to help you use our themes as they are designed with all the proper pagespeed, accessibility, SEO and user experience optimizations. Customizing the theme with the customizer may create problems in all these areas unless done in collaboration with an experience custom developer.