I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Can you clarify what the issue is, then, please? As I understood it, you wanted to position the logo in the middle of the menu, and to do that, you were advised to split the menu into two. It seemed to me that that is where this topic starts, but clearly I’ve misunderstood.
[quote=“Nauman_Tanwir, post:5, topic:219096”]
Its a wordpress site. I do not have control over html.
[/quote]I don’t use WordPress, but I do think you’re mistaken there.
I linked to a tutorial above, and unless I’m mistaken, I’ve previously suggested a couple of SitePoint articles to you, too.
Some css tweaks have the menu more like the picture.
The logo has absolute positioning, so has no area in the flow, that’s why the menu items go all over it.
Remove that property, then remove the float from the containing ul.
It will still need further tweaks to perfect, but that is much closer to your goal.
If you have access to the dashboard (or file structure) of your WP cite you can alter the theme; this includes both the PHP and the CSS. you can extrapolate the the HTML markup by using “view source” on your browser.
Using the dashboard for that simple theme edit , would probably be the best an easiest solution.
Actually, now I look again there are other issues. At my maximum screen width of 1280px, the “Location” menu item is only partially visible. At narrower screen widths, items on the right are not visible - and not accessible, because there is no horizontal scroll bar.
If this is a theme that you found ready-made and are adapting it, make sure you do it through a child theme so that the original theme code is not changed at all. You will lose all your changes next time that theme is updated.
In the child theme, you can make any changes to the code that you want to get the effect you want, including the html and php.