Menu Bar alignment

Hi there,

Thank you for contacting us,

Since your menu bar is designed using Elementor while the rest of the page is raw HTML and CSS, the alignment issue is likely caused by differences in styling between Elementor and your custom code. Here’s how you can align the content with the menu bar logo:

1. Check the Container Widths

• Elementor uses max-width: 1140px (or similar) by default for containers.
• If your raw HTML content has a different width, it won’t align.
• Inspect the menu bar container by right-clicking it in Chrome > Inspect (DevTools) and find its max-width.
• Apply the same width to your custom HTML content:

.container { max-width: 1140px; /* Adjust based on Elementor's settings */ margin: 0 auto; /* Center the content */ padding: 0 15px; }

Also you can set you header container widht and adjust it to you page width – https://elementor.com/help/container-element/

Hope this helps.

HI there,

Thank you for your feedback,

1. Check the Max Width in Elementor Settings
   • If you’re using a Container, go to Edit Container > Layout and check the Width setting – https://prnt.sc/M3PCZ9hxZoFU
   • If the menu is inside a Section, check Edit Section > Layout > Content Width (set to “Boxed” or “Full Width”).
2. Inspect with DevTools
   • Right-click on your menu and choose Inspect (Chrome) or Inspect Element (Firefox).
   • Look for the CSS rules affecting the menu width.
   • Search for properties like max-width, width, or flex-basis.
3. Global Settings and Theme Influence
   • Some themes (e.g., Astra, The7, etc.) may set global container widths under Appearance > Customize > Layout > Container Width.
   • If your theme has a Header Builder, it may have separate width settings for the menu.

Could you clarify where exactly you are checking for the max-width? Are you looking at the menu inside an Elementor container, or is it set globally in your theme?