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

HTML & CSS
1

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.

2

Why would you want to use JQuery? Won’t some CSS here do the trick?

3 Likes
3

I was about to ask the same thing!

4

actually, I tried doing it using css, but didn’t succeed.

So, thats why now jQuery is the only option I have.

thanks again.

5

But it’s not the only option. Don’t be too quick to fall back on jQuery/JavaScript if you have problems with your CSS. These two technologies serve different purposes. One of the CSS experts might have some good suggestions for you. I’m not an expert, but I have done sites like this simply by floating the two menus - one to the left and one to the right. Probably not the best way but it worked.

3 Likes
6

yes I understand you.

yea I tried that, but this is a wordpress site and as you would know, the code in wordpress theme is not like sites build the old school way. So, thats why I used the jQuery to move the logo in between and was hoping to re-position the menu elements accordingly.

7

Are you using an off-the-shelf theme, a child theme or one you have developed yourself?

8

No, I haven’t developed this theme.

I bought it from theme forest.

I contacted the dev for help but they haven’t replied back, So, now I have to do it myself.

9

Javascript is not going to help you there…you need to fix either

  1. the structure that the menu is on
  2. the css which is displaying the structure
    or
  3. both (which would be my guess…)

I mean, you’ve got an image which is 750px and trying to put it into a container that is 799px wide. Right there guarantees you’re going to have issues with text wrapping, so the placement is the least of your problems.

2 Likes
10

For a start, the logo image in in an <a> tag in the middle of a <ul> which is invalid code, among other errors.

11

hmm you are right. Thanks everyone.

12

I’ve done that sort of navigation with a WordPress site - just split it into two different menus, one for the left and one for the right. But you would need to do a bit of coding to get that effect.

13

hmm yeah you are right.

thats where I am struggling mate. some heads up would be great help.

thanks.

14

I’ve moved this to the HTML/CSS forum, as it has nothing to do with JavaScript now.

[quote=“Nauman_Tanwir, post:13, topic:218793”]
some heads up would be great help.
[/quote]What kind of “heads up” do you need? @WebMachine gave you the basic principal:

15

right. thanks a mil.

16

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