Navbar Button Menu issues

[Casimir]

Greetings – I’m trying to work out a couple issues I’m having with a navbar on a site I’m developing. You can find the code here:

https://codepen.io/Cerebus06/pen/WgZYVG

The first issue is an odd spacing problem. If you view the code in Chrome, when you move down over the drop down menu links it’s smooth and it works like it should. However, if you view the code in Firefox, there is a “gap” below the main navbar menu button and the dropdown links – this causes the dropdown menu to disappear when the mouse moves over it (try moving the mouse slowly and you’ll see what I mean). If you move the mouse down quickly enough you can avoid it, but there’s still the “gap” issue. I have no idea how to fix this. I’ve tried spacing, changing the div height, etc.

The second issue is that I need to center the navbar menu. I can’t get this to work either – I’ve tried block and inline methods but haven’t gotten any to work (and admittedly I’m not a CSS guru).

Any help would be greatly appreciated!

[Atelierbram]

Fix the gap:

/* Menu Bar Style */
.navbar {
/* overflow: hidden; */
  position: relative;
}

Center the navbar menu:

.item-b {
  grid-area: menu;
  display: flex;
  justify-content: center;
}

[Casimir]

Hi Atelierbram –

Thanks for the response. Those solutions did the trick – thank you very much.

[Author]

Posts