You can see what becomes of q-layout in chrome inspector.
Screen Shot 2020-11-09 at 16.19.17.png
If you use q-layout (you are using Quasar) you will have to put elements inside it which are compatible with q-layout. It only make sense that way.
As you found out a single un-styled div isn’t compatible. While it isn’t impossible to make it compatible … you will likely going to rebuild q-headerin the process. And this extra work you are doing for what ?
So the options are
a, Style your custom component so it is compatible with q-layout.
b, Create your own layout and not use q-layout. I think you will miss out on a lot. q-drawer to start with. Unless of course you make your layout compatible with q-drawer.
c, the best IMO is to use q-layout with the already provided compatible elements after all why reinvent the wheel.
@dpamio I don’t see any Sass file in the project but styl files for styling. The could you posted could possibly be fore quasar 0.17.
I got this to work by inspecting the element and playing with the css:
First, add a background-color and opacity as 1 to q-focus-helper. Then remove the opacity and background-color from the q-focus-helper ‘before’ and ‘after’ css.
Now you will have an opaque background colour when hovered but it will cover the text.
So add z-index 1 to q-item__label.