Equally space menu items on navigation bar

Travelify
1

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.

2

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

3

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

4

Hi there

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

5

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.

6

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.

ul.root.l_tinynav1{
	text-align:center;
}

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

ul.root.l_tinynav1 li{
	float:left !important;
	display:inline-block;
	width:20%;
}

#main-nav a{
	float:none;
	margin-left:2%;
	margin-right:2%;
}

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.

7

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

8

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!