How do I wrap my menu in to sub menu using jquery?

this is my site.

this is how I finally make it look like

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.

Now, I have been trying to achieve this by

jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");

I have trying this in browser console.

I also tried same above code by using appendTo() instead of after()

But, still no luck.

Not sure what you’re trying to do with jQuery. You need CSS to position the elements.

Isn’t this still the same issue as your previous thread?

1 Like

hi,

No, its different. Earlier question was concerning the logo.

This thread is concerning the menu items.

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.

OK, sorry.

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.

html code in wordpress, is not like other plain mark up.

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.)

point taken.

would you like to suggest some solution for my current problem or should I consider your last comment as the suggested solution.

thanks again.

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.

1 Like

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.

3 Likes

Thread moved to HTML/CSS forum.

1 Like

What are you doing with a logo that’s over 4000px wide? You should be resizing the image file before inserting it into your page.

1 Like

thanks everyone. I resolved the issue using css.

Thanks again.

Good to hear.

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.

2 Likes

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.

Yes. “simple” being key here when doing live editing.

And for goodness sake do a copy-paste save of “original” and when yours works a copy-paste “mine”

“original” will be needed if your changes break things
“mine” will be needed when an update .wipes out your changes

1 Like

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.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.