Menu icon Foundation
Submenu too wide

I have a main navigation and some submenus on hover. The submenus are too wide. I am trying to get them to be the same width as the parent above. I tried setting explicit widths, that didn't work.

foundation 6 navigation

foundation 6

I have a main navigation and some submenus on hover. The submenus are too wide. I am trying to get them to be the same width as the parent above. I tried setting explicit widths, that didn't work.

foundation 6 navigation

Pratiba Premkumar 2 months ago

Anyone?

Roy Six 2 months ago

Can you show us some code (link us to the website or post a codepen)? Are you using dropdown submenus?

Foundation's (v6.4.2) dropdown submenu width is set in the following CSS, but it only applies a min-width (the computed width ends up being auto, which can be overridden), so I'm not sure why your submenus are so wide without looking at the code:

.is-dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: none;
  min-width: 200px;
  border: 1px solid #cacaca;
  background: #fefefe;
  }

 

Pratiba Premkumar 2 months ago

Yes I actually managed to figure this out. The solution was to override the css rule  min-width: 200px; in the .is-dropdown-submenu class.