0

I create a new theme for Magento 2 based on Luma theme. I change the submenu of the top navigation to be 100% width.

.navigation .level0 .submenu {
    max-width: 1280px; 
    width: 1280px; 
    padding: 25px 0;
}

And now I want to change the submenu position, right now the submenu start right selected category, I need to made the submenu to start from left side.

I try to add position: absolute; and left: 0; but is not working.

How I can move this submenu to start from left side?

enter image description here

Thank you

1

.ui-menu-item - change position to position: static;

.navigation > .ui-menu - change position to position: relative;

.ui-menu-item {position: static;}
.navigation > .ui-menu {position: relative;}

It should do the trick ;)

UPDATE: To override it through css use this:

.navigation ul {position: relative;}
.navigation li.level0 {position: static;}
.navigation .level0 .submenu {left: 0 !important;}
  • Hi, thank you but is not work. I have the feeling that the size position is calculated automatically with javascript, because when I select the submenu element I see this: element.style {display: block;left: -0.0333333px;top: 47.7333px;} – Robert Sep 27 '18 at 11:40
  • I think it doesn't matter. The left value is almost zero. Element which is absolute is displayed based on position of nearest relative parent node. By default the li is relative, you need to change that to static and make ul relative. – Jan Żaba Oct 1 '18 at 17:12
  • Ok, thanks for a link. I've checked that. You got two options: 1. Locate javascript which calculates left position of submenu. 2. Force position through css. (see edited answer) – Jan Żaba Oct 3 '18 at 15:54
  • I have one request to you please remove that image, it contain logo and a lot of things. thanks – Robert Oct 3 '18 at 18:51
  • and is not work because the left position is calculated in front of the css so our left: 0 will be disabled – Robert Oct 4 '18 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.