'Mega Menu' is shifting my language selector, account, and cart icons down. How to fix?

[CozyVibesHome]

I'm working on a template, and when I select the 'Mega Menu' option, the language selector, user account, and cart icon section move downwards, disrupting the layout. Has anyone experienced this issue or know how to fix it? I'd appreciate any guidance or suggestions for places where I can get help with this type of problem.

https://www.cozyvibeshome.com/
pass: cozycozy

[TheUntechnickle]

Hey @CozyVibesHome,

Here’s an updated solution to adjust your header layout effectively. This approach resets the header grid and ensures proper alignment for the search, logo, and icons areas, while also addressing responsiveness and navigation alignment.

Add this CSS to your base.css or theme.css file.

/* Reset the header grid */
.header--top-center {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Top row container */
.header--top-center::before {
  content: '' !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Main header row */
.header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 20px 0 !important;
}

/* Left side - Search */
.header__search {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-start !important;
}

/* Center - Logo */
.header__heading {
  flex: 2 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Right side - Icons */
.header__icons {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Navigation row */
.header__inline-menu {
  width: 100% !important;
  margin-top: 10px !important;
}

/* Ensure mega menu doesn't break layout */
.mega-menu__content {
  position: absolute !important;
  width: 100% !important;
  left: 0 !important;
  top: 100% !important;
  z-index: 20 !important;
}

/* Menu items alignment */
.list-menu.list-menu--inline {
  justify-content: center !important;
}

/* Icons specific styling */
.header__icon--account,
.header__icon--cart {
  display: flex !important;
  align-items: center !important;
}

/* Responsive adjustments */
@media screen and (min-width: 990px) {
  .header {
    padding: 20px 50px !important;
  }
  
  .header__heading {
    margin: 0 auto !important;
  }
  
  .header__icons {
    min-width: 120px !important; /* Ensures consistent space for icons */
  }
}

If this doesn’t work, it’s likely that the HTML structure needs adjustments. Let us know if you’d like us to look into it, and we can send a collaborator request to assist further.

Let me know if you have any questions or need more help!

Best regards,
Shubham | Untechnickle

[CozyVibesHome]

Hello! Thank for your response.
In this moment my header looks like this....I don't know why have to search fields.

Thank you so much for you help!

[CozyVibesHome]

I would like something like this:

[CozyVibesHome]

sorry wrong image: 

[TheUntechnickle]

I understand this very well. The thing is we need to change the HTML structure for this, and then align the CSS accordingly. Our team needs the collaborator access to get this done. It'd be great if you can send us the collaborator code so that we can send a request; only if you're comfortable. 

Thanks,
Shubham | hello@untechnickle.com