Member Avatar for alanlee9898

Hi,

Previously I have manage to center the image and the background.

But I having difficulty when I set div logo to the center, then it "blocked" mouseover buttons (the company and the workshop).

Link :

Hope someone can help me here!

Thanks.

  • 3 Contributors
  • 4 Replies
  • 108 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by alanlee9898

Dani AI

Generated

Centering the logo in that header created an invisible overlay: the logo’s positioned container sat over the company/workshop buttons and intercepted mouse events. That is a stacking/overlap issue rather than a problem with the menu itself.

tried adjusting the logo container size and pointed to stacking order, which fixed the immediate problem. For a more maintainable approach, either let the menu sit above decorative artwork or make the decorative element ignore pointer events so underlying controls remain reachable.

A simple, modern solution when the logo is purely decorative:

.header-logo { pointer-events: none; }
.header-logo a { pointer-events: auto; }   /* enable link clicks if the logo is clickable */

See pointer-events on MDN for compatibility details. For environments where pointer-events is not suitable, ensure the navigation has an explicit stacking context above the logo:

nav.main { position: relative; z-index: 10; }
.header-logo { position: relative; z-index: 1; }

Negative stacking values can be brittle and may hide elements unexpectedly; explicit positive stacking for interactive controls is usually clearer. Browser developer tools are useful for inspecting which element covers another and verifying hover/click behavior across breakpoints and legacy browsers. Since marked the thread solved by , the above explains why the overlap happened and offers alternatives for similar layouts.

Recommended Answers

All 4 Replies

Member Avatar for ansaripk

change the width of logo div to 100%
and your problem will be solved.

Member Avatar for alanlee9898

I have change the width of logo div to 100%.

Still not working. I have no idea about it.

Member Avatar for Arkinder

I can't look at it right now, but try the z-index property.

z-index: -1;

Regards
Arkinder

Member Avatar for alanlee9898

solved! thanks arkinder!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.