Kevin Powell - Community•8mo ago

Nav menu items not tking full hight of parent container.

I am making a navbar and i am facing this issue in dropdown, when i hover over the link then sub menu is not falling below header,i believe this is because the nav items are not taking full height of parent container,and i dont want to use absolute value. i have attached images for reference.and also code pen link for code reference. https://codepen.io/deepaka34196835/pen/OJGaeOR

Deepak arya

CodePen

OJGaeOR

...

7 Replies

stillmorris•8mo ago

Hi! Do you mean full width, right?

IVYOP•8mo ago

No the length of the links

stillmorris•8mo ago

You can add

left: 0

left: 0

property and change width to 100% value.

.menu-sub {
  visibility: hidden;
  z-index: -999;
  position: absolute;
  background-color: #fff;
  **width: 100%;**
  z-index: 20;
  top: 70px;
  border-radius: 0 0 8px 8px;
  transition: ease-out 0.3s;
  display: flex;
  **left: 0;**
}

.menu-sub {
  visibility: hidden;
  z-index: -999;
  position: absolute;
  background-color: #fff;
  **width: 100%;**
  z-index: 20;
  top: 70px;
  border-radius: 0 0 8px 8px;
  transition: ease-out 0.3s;
  display: flex;
  **left: 0;**
}

Ah ok

IVYOP•8mo ago

If you check the above images the ul height is not taking entire header space So when i am adding dropdown to it then it not falling beloq the header border

stillmorris•8mo ago

Ok. So you have an 80px height on header-customize-item account item in header-ct-right. I think you should add same height on the ul.menu-primary-menu or 100% height in its containers. Also add the align-items: center flex property in that to vertically center the nav items. If you want that nav items have the same height, simply add a 100% height too and maybe a flex align-items and it's done 🙂

IVYOP•8mo ago

Thanks i will try that @stillmorris i tried adding 80px on parent and 100% on container but its moving all the nav links to top. Even after applying allign item center the links are not certically aligning to center.

stillmorris•8mo ago

Hi. I'm show you how I would do it.

/* Remove this position relative */
#menu-primary-menu>li {
    position: relative;
}

/* Add height of 8rem and display flex properties on link to avoid submenu blinking issues on hover */
#menu-primary-menu>li>a {
    height: 8rem;
    display: flex;
    gap: .4rem;
    align-items: center;
    padding-inline: 2rem;
}

/* Add position relative to sub-menu parent */
.menu-bar {
  position: relative;
}

/* Set the top position to 0 regarding its parent element .menu-bar position */
.sub-menu {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: ease-out 0.3s;
    min-width: 240px;
    border: 1px solid #e5e5e5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: start;
    overflow: hidden;
}

/* Remove this position relative */
#menu-primary-menu>li {
    position: relative;
}

/* Add height of 8rem and display flex properties on link to avoid submenu blinking issues on hover */
#menu-primary-menu>li>a {
    height: 8rem;
    display: flex;
    gap: .4rem;
    align-items: center;
    padding-inline: 2rem;
}

/* Add position relative to sub-menu parent */
.menu-bar {
  position: relative;
}

/* Set the top position to 0 regarding its parent element .menu-bar position */
.sub-menu {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transition: ease-out 0.3s;
    min-width: 240px;
    border: 1px solid #e5e5e5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: start;
    overflow: hidden;
}

Also there is a link before Resources that I think it's not supposed to be there. Have a great night!

Gaming

Programming

Nav menu items not tking full hight of parent container.