How to Build a Responsive Full‑Width Horizontal Navigation Bar

Step 1: Create a full‑width navigation bar

Insert a dynamic panel (or container) at the top of the page with coordinates x=0, y=0, height 50 px. Set its width to 100 % of the viewport (or a specific screen width such as 1230 px). Apply a background fill #F8F8F9 and a subtle drop shadow (offset x=1, y=1). Enable the “100 % width” option so the panel stretches automatically when the browser window is resized.

Step 2: Add logo and action buttons

Place the company logo at the left edge of the navigation bar.

On the right side add three interactive elements:

Text label “Sales Consultation” with font color #0664F5.

Login button using the same font color #0664F5.

Free‑trial button with a solid fill #0664F5 and white text.

Step 3: Build the navigation menu

Create rectangular text items for the sections: Home, Product, Customer Cases, Pricing, About Us.

Set each item’s fill to none, border width to 0, and font size to 16 px.

Define a selected style: visible bottom border, border color #0664F5, border thickness 2 px, and font color #0664F5.

Group the items into a single widget so they can be moved together.

Attach mouse‑over and mouse‑out events to each item to toggle the selected style, providing a hover effect.