How can I alter the shape of my website's navigation menu?

[kitchencrafted]

Hello! How can I change the navigation menu shape on my website? Here's a link to my website & picture on how I want it to be. 

Thank you in advance! 

My navigation menu: https://prestigestraps.com / password: asd321

How I want it to look: https://mrabshow.com

[Michael_Pink · Accepted solution]

hi @kitchencrafted 

You can try follow this path:
Themes => edit code => asset => component-mega-menu.css
and add this code to bottom of the file component-mega-menu.css

.mega-menu .mega-menu__list--condensed{
display: flex;
}

[Michael_Pink · Accepted solution]

hi @kitchencrafted 

You can try follow this path:
Themes => edit code => asset => component-mega-menu.css
and add this code to bottom of the file component-mega-menu.css

.mega-menu .mega-menu__list--condensed{
display: flex;
}

[kitchencrafted]

Hello! Thank you for your solution! Can you center them from where the orange line is?

[Michael_Pink]

@kitchencrafted 
Replace the code above with this

.mega-menu .mega-menu__list--condensed {
  display: flex;
  max-width: 100%;
  padding-inline: 5rem;
}

[kitchencrafted]

Thank  you so much! 🤗

[LucyBen]

Hi there, I have the same issue but there is no component-mega-menu.css under assets. Where could it be?

[dmwwebartisan · Accepted solution]

@kitchencrafted 

Please add the following CSS code to your assets/component-mega-menu.css bottom of the file.

.mega-menu .mega-menu__list--condensed {display: flex !important;}

Thanks!

[kitchencrafted]

Hello! Thank you for your solution! Can you center them from where the orange line is?

[dmwwebartisan]

@kitchencrafted 

Please add the following CSS code to your assets/component-mega-menu.css bottom of the file.

.mega-menu__content .page-width {margin: 0 0 0 20px !important;}

Thanks!