Customizing Highlighted Sections for Better Text Layout

Customizing Highlighted Sections for Better Text Layout

This article outlines a simple method to adjust the width of highlighted sections in your screenshots so that brand names and other text are not split across multiple lines.

Sometimes, due to layout constraints, text within highlighted areas can wrap unexpectedly. With a small CSS tweak, you can expand the width of these elements for a more readable display.

Below, you will find use cases, key CSS settings, and a step-by-step guide to help you implement this change effectively.

Use cases

• Improving readability of brand names in screenshots.
• Preventing unwanted text wrapping in UI components.
• Enhancing the visual layout of highlighted sections on webpages.

Key settings in Infigo

• headermenu: Access the custom CSS file where header menu styles are defined.
• navbar: Within the headermenu styles, locate the navbar section.
• navbar-dropdown: Adjust the width property by setting it to a desired pixel value (e.g., width: 300px).

Step-by-step guide

1. Open your website's custom CSS file where the header styles are maintained.
2. Locate the headermenu block, and find the nested navbar and navbar-dropdown sections.
3. Add or modify the width property in the navbar-dropdown selector, for example: width: 300px;
4. Save the changes and refresh your browser to see the updated layout with a wider highlighted section.

Related links

• Infigo Academy – CSS Customizations

For additional guidance, head over to the Infigo Academy or contact our Customer Support team.