Why is my element placing over my nav?

Hello all, I have a little query for you and was wondering why my google reviews widget is able to be put over my navigation bar when the navigation bar should be on top of it. Sorry if I am a little bad at explaining this but I will show some pictures so you can get a better understanding of what is going on:


Here is my code including css, just to note the top of my css is a reset stylesheet:

Thank you all for looking at this and I will be very thankful for the reason behind this.

1 Like

Hey svumo,

You have to set z-index: 1 to the .header class,

and then set z-index: 0 to your .reviewwrapper class.

Just like that:

.headers {
  z-index: 1;

.reviewwrapper {
  z-index: 0;

The z-index property specifies the stack order of an element.

The element will appear first, as long as the value of his z-index is higher.

:link: You can read more about “z-index” here


1 Like

Appreciate that a lot, thanks a ton.
It worked. :grinning:

1 Like


Good luck and keep up your good work