Search code examples
cssvue.jsdropdownnuxt.js

drop down on navbar is underneath the other components

I am using the nuxt.js and I have a fixed header which I have a drop-down for changing the languages, but the problem is as I have set a height for header component when I click on the dropdown button it only shows up to that height you can find the image to problem here: https://ufile.io/g7tosuph

I have tried giving position: absolute to the drop-down items and also z-index of 9999 but no luck it is still underneath the other components in every page I have also made sure that the styles are note scoped in the .vue files

.header-whole {
  background-color: #0e1e25;
  position: fixed;
  overflow: hidden;
  height: 70px;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.lang-items {
  position: absolute;
  z-index: 9999;
  overflow: hidden;
}

Solution

  • Could you provide some sample code?

    I guess you have set your <header> position to "fixed", try to set your <header> z-index a z-index value, as well (greater than the <main> z-index value, if any).