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

[Nauman_Tanwir]

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.

[Gandalf]

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

[TechnoBear]

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

How do I move the menu items to the left using jQuery?

This is my site: http://91.109.247.178/~brasseriegalway/ How do I move the menu element to left and align all of them like the attachment using jQuery. This is what I did to move the logo in between the menu bar. jQuery("#menubar-brand").insertAfter(jQuery('.menu-list-right').children()[3]); link to the attachment Please help. Thanks.

[Nauman_Tanwir]

hi,

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

This thread is concerning the menu items.

[Nauman_Tanwir]

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.

[TechnoBear]

@Nauman_Tanwir

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

This thread is concerning the menu items.

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.

https://thethemefoundry.com/blog/edit-wordpress-theme-html/

[Nauman_Tanwir]

@TechnoBear

I don’t use WordPress

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

[TechnoBear]

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

[Nauman_Tanwir]

@TechnoBear

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.

[TechnoBear]

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.

[SamA74]

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.

[TechnoBear]

Thread moved to HTML/CSS forum.

[Gandalf]

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.

[Nauman_Tanwir]

thanks everyone. I resolved the issue using css.

Thanks again.

[TechnoBear]

@Nauman_Tanwir

I resolved the issue using css.

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.

[dresden_phoenix]

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.

[TechnoBear]

@Nauman_Tanwir

I resolved the issue using css.

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.

[Mittineague]

@dresden_phoenix

Using the dashboard for that simple theme edit , would probably be the best an easiest solution.

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

[WebMachine]

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.