Equally space menu items on navigation bar

I have not found an answer to how to stretch and equally space the menu items across the width of the page, rather than having them bunched up in the center. I attach an image of what I’m looking to achieve. Many thanks.

Hi there

Hope you are having a good day and thank you for your question
In order to check your question i need to see your live website, please provide url and i will take a look

http://peacocks.apugara.eu/ is the site I’m working on. Many thanks.

Hi there

i see the completely different menu on the website, looks like you changed it to the question?

Sorry about the confusion. The website peacocks.apugara.eu is the one I’m working on and I would like the nav bar to look similar to the one in the original question. That snap was taken from peacockmontessori.co.uk. I hope you can help.

Hi there,

Apologies for the late reply.
They have done some modification to there site here www.peacockmontessori.co.uk/ in that they use some CSS to get that look.

You can try and copy it from the browser console inspect element that is.
We tried to replicate it a little bit i.e.


#main-nav li{
	margin:0 !important;

ul.root.l_tinynav1 li{
	float:left !important;

#main-nav a{

Hope you can work it from there.
If you need further help on this modification then consider reaching out to a service that offers this: https://colorlib.com/out/envatostudio

Hope this helps.

Many thanks. It works perfectly to what I wanted to achieve.

Hi, there

Nice to hear, in this case, I will close this ticket now, Feel free to contact us again if you have other questions Thanks!