I currently have the navigation working to some extent, but what I am trying to achieve isn’t working.

What I am trying to do is have the logo in the middle with two sets of nav links to the left and right of the logo, with the left links aligned to the right of the logo and the links to the right aligned to the left.

Then I am trying to align the telephone to the far left and the CTA to the far right, but I can’t work out how to do this.

I have tried playing around with flex-end and flex-start, but it’s not working.

Does the html have to remain the same as it would be easier with the logo as a sibling of the links and not absolutely placed into position from somewhere else?

Then it would just be a case of centring the logo and 4 links while pushing first and last items to either side (which is easily achieved in Flexbox by using auto margins on one side of each element which pushes the element as far as it can go in the opposite direction).

The [point being is that as the logo is absolutely placed to the middle then you need to create space for it using the same measurement as the logo. I’ve used a 90px margin on each side of the ul that sits to the side of the logo and that preserves the space.

Note that because your telephone and cta elements are different widths (because they are content width) then there is no way to centre the 4 links in the middle of the page while having variable width content at either end. This is an issue that has never properly been solved via css in that elements are generally centred as a block so you can’t centre one element and then have variable width content either side and keep all in the normal flow.

The answer to this in the code above is simply to give the left and right items the same width and then the whole nav will centre properly.

The logo is still absolutely placed, which I don’t like, but I understand that it’s because the bootstrap brand and toggle effect create the dropdown nav on smaller screens so they must remain separate or else you have to build your own toggle menu effects.

Just to show how simple it can be outside of bootstrap here’s a quick demo.