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.
hi, thanks for responding. Its a wordpress site. I do not have control over html. I have control over css. Thats why, I am trying to do it by using jquery.
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.
That doesn’t mean you can’t edit it, though. You just have to learn how. (And given the number of WordPress sites you seem to have been working on, I’d suggest that should be a priority.)
Yes, my suggestion is that you stop trying to cobble together JavaScript solutions (which will break your layout if JS is disabled or fails to load for some reason) and do things correctly with HTML/CSS.
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.
You are aware, aren’t you, that your logo doesn’t show without JS enabled? You still need to insert that in the HTML - especially as enabling JS seems to mess up the rest of the layout.
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.