Responsive navbar centering issue

1

Hi there fellow coders,

I recently used this example to code my navbar which has worked out stupendously I might say.

However, I had a problem. The full desktop version of the navbar wasn’t centering but aligning to the left so I added the below code to the CSS and put it at the top level

like this in the body -

.centrenavbar {
display: flex;
justify-content: center;

It worked perfectly but I have an issue when the navbar reverts to mobile mode. The three stacked horizontal lines representing the navbar are centered which is what I want, but when you click on it, it jumps to the right margin. I haven’t been able to work out how to get it to stay centered.

Thanks.

2

Update - I sorted out the centering issue, but another problem I didn’t notice is that the centre triple bars that appear in responsive mobile version of the navbar needs clicking twice for the dropdown menus to appear.

I’ve researched it and some are suggesting the the CSS item display: block; should be set to none. This doesn’t work, it makes the whole mobile navbar disappear.