The live link
They are using li elements, the logo adam grant is in between the menus. This is a very hard case where menu items are 6, but If I want to build an HTML template and then convert that into wp theme the menu items will not always be fixed numbers. what if we want the logo in between JS can do this. Is there a CSS way around it?
I have to say that looks like a horrible way to design a menu. As a visitor I would expect the menu to be a single entity, not something split by a logo in the middle.
Yes you can do that with flexbox or grid but what you can’t easily do is have the logo centred in the viewport. It can only naturally be centred in the space between the links either side unless you compensate to make the left and right sides always the same width (e.g have 30% width left and 30% width to the right).
The example you linked to does not centre when there are only one or two links on the right (or vice versa).
If you let me know the requirements I can offer some code later today when I am back at the computer .
Here are some old codepens that show possible solutions if perfect centring is required;
[edit]
It still may be that you will require some JS to spread the menu if you have an unknown number that you want spread left and right. I may have overlooked that point
[/edit]
Sir, Thanks for replying. No specific requirement I was planning to make 10 HTML templates for blogs and convert them into WordPress themes and distribute them free of WP repository. So was browsing Internet and go this one also.
However if you can ivest time than for sake of learning that would be greater forevery one who is browsing this post.
Could you elaborate how the menu should behave in different cases?
Is it up to the user of the template to decide how many items there would be on each side of the logo?
Should the items wrap on their side when the viewport resizes?
Your example menu seems to be designed in a very limited way, not suitable for a template that can have different set of items or adapt to various widths.
I would also imagine a first time user might also think that is a link and it holds something of importance.
Here’s roughly the way I would emulate that website’s navbar:
See what happens if you reduce the width of the CodePen 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
