Individually adjust menu item spacing

mbridge87 · March 6, 2014

Hey,

If you look at my site at the moment you'll notice the spacing on the current menu (top menu). The only way I could achieve this was to add four separate menus and use separators.

My problem is that now when viewing on mobile it looks terrible and I can't use the collapse for mobile function on the menu, as effectively there are 4.

As such I will be combining the current menu into one but could someone please let me know how to individually adjust the spacing on each menu item.

I really hope that's clear.

My site: http://www.maxbridge.co.uk/

Thanks

P.S. if you have a chance please also take a look at this thread: http://www.dgrin.com/showthread.php?t=245680

mbridge87 · March 7, 2014

bump

phaserbeam · March 7, 2014

mbridge87 wrote: »

Hey,

If you look at my site at the moment you'll notice the spacing on the current menu (top menu). The only way I could achieve this was to add four separate menus and use separators.

Can you try this code to see if that would fix your problem? I tried it on my own site which also is using a horizontal menu.

I would suggest using margin left+right to keep the menu centered...
EDIT: Added page-widget-ID so only the top menu is affected by new margin settings...

.sm-page-widget-5337099 .sm-page-widget-nav-horizontal ul li {
    margin-left:30px;
    margin-right:30px;
}

leftquark · March 7, 2014

Did you figure this out? Your site looks fine to me and I don't see extra menu items.

This is actually super simple and can be done without CSS (although it can be done with CSS as well). On your Customizer, just click the little triangular ruler icon for the menu. Here you can edit the dimensions. Give it a "Top Margin" and you're all set.

phaserbeam · March 7, 2014

leftquark wrote: »

Did you figure this out? Your site looks fine to me and I don't see extra menu items.

This is actually super simple and can be done without CSS (although it can be done with CSS as well). On your Customizer, just click the little triangular ruler icon for the menu. Here you can edit the dimensions. Give it a "Top Margin" and you're all set.

The problem with multiple menu content blocks might be that they may overlap if you are using a smaller screen size. See screenshot.

I think using a single menu with margins for each menu entry might work better....

leftquark · March 7, 2014

I think Max figured this out, based on my testing. Correct?

Hikin' Mike · March 7, 2014

phaserbeam wrote: »

The problem with multiple menu content blocks might be that they may overlap if you are using a smaller screen size. See screenshot.

I think using a single menu with margins for each menu entry might work better....

I resized my monitor to a smaller size and I didn't see that. I also used Screenfly and it displayed fine: http://quirktools.com/screenfly/#u=http%3A//www.maxbridge.co.uk/&w=320&h=568&a=37&s=1

mbridge87 · March 7, 2014

Hey Guys,

Thanks so much for all your responses. I always appreciate the help.

I think I've inadvertently caused some confusion here. I had a spare 30 mins before going out for dinner with the girlfriend so I added a new menu to see if I could solve the problem myself. I added the new menu at the top of the page, above the (rubbish) "Max Bridge" logo. I then rushed out the door and forgot to take it off the site. Since then you've all replied and this has caused some confusion.

My original question was about the menu bar that you can see below the logo, this is the original menu I asked about. " phaserbeam" is exactly right, what I want and need to do is combine that menu, the one below the logo at the moment, into one menu. Currently it's separated into four menu's as I had now idea how to individually space menu items within the same menu.

Hence my question remains:

How do I space individual menu items within the same menu? I would like them to visually look how they do now but to all be in a singular menu thus allowing for better mobile optimization.

I hope that's clear and sorry for any confusion caused.

mbridge87 · March 9, 2014

bump

phaserbeam · March 9, 2014

mbridge87 wrote: »

bump

See my code above...

You can not change spacing for individual menu entries.. either all or none (except maybe first or last). You can not make the 2nd menu entry have a different spacing then the third or fourth.

The code above will change the spacing for the entire block.

Hikin' Mike · March 9, 2014

The only way to do that (that I know of) is to do a custom nav. Unfortunately doing a custom nav doesn't allow for a nice mobile device menu.

snakeey11 · March 11, 2014

I'd suggest taking a look at the :nth-child CSS pseudo selector (with the caveat that versions of IE prior to 9 don't support it): https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child. With some finagling, this should get you what you're looking for.

-Mike

mbridge87 · March 11, 2014

Hi Mike,

Thanks for the advice. I've spent the last hour trying to do this but can't seem to figure it out.

It will sound stupid but please remember I'm very new to this. I can't seem to select the correct element...I always have this issue as I don't really understand CSS or HTML. I've tried using page inspector and a couple of other downloaded tools but I can never seem to get the right things selected...

Any help would be hugely appreciated.

Currently I've been tinkering with this:

".sm-page-widget-5337099 .sm-page-widget-nav-horizontal A:first-child {
margin-left: 0px; margin-right: 0px;
}

.sm-page-widget-5337099 .sm-page-widget-nav-horizontal A:last-child {
margin-left: 0px; margin-right: 0px;
}"

Don't ask me how I landed at that.

Help please! I feel like I'm close, ish, to getting this done...

Hikin' Mike · March 11, 2014

mbridge87 wrote: »

Hi Mike,

Thanks for the advice. I've spent the last hour trying to do this but can't seem to figure it out.

It will sound stupid but please remember I'm very new to this. I can't seem to select the correct element...I always have this issue as I don't really understand CSS or HTML. I've tried using page inspector and a couple of other downloaded tools but I can never seem to get the right things selected...

Any help would be hugely appreciated.

Currently I've been tinkering with this:

".sm-page-widget-5337099 .sm-page-widget-nav-horizontal A:first-child {
margin-left: 0px; margin-right: 0px;
}

.sm-page-widget-5337099 .sm-page-widget-nav-horizontal A:last-child {
margin-left: 0px; margin-right: 0px;
}"

Don't ask me how I landed at that.

Help please! I feel like I'm close, ish, to getting this done...

I'm about ready to go to bed (it's almost 3am here). Thought I'd post this. Hope this will get you close. I used the ':nth-child()' to select each of the 4 links. You'll see the (1), (2), (3), and (4). Those are the four links. I haven't tried it:

.sm-page-widget-5337099 .sm-page-widget-nav-horizontal a:nth-child(1){
    float:left;
    margin:0 20px 0 0;
    }
.sm-page-widget-5337099 .sm-page-widget-nav-horizontal a:nth-child(2){
    float:left;
    float:left;
    margin:0 20px 0 0;
    }
.sm-page-widget-5337099 .sm-page-widget-nav-horizontal a:nth-child(3){
    float:right;
    margin:0 0 0 20px;
    }
.sm-page-widget-5337099 .sm-page-widget-nav-horizontal a:nth-child(4){
    float:right;
    margin:0 0 0 20px;
    }

mbridge87 · March 11, 2014

Mike...you are a hero!

I had to adjust the code a little but you saved the day! Thank you!

If anyone else needs to do something similar I used the following code and had to do some tweaking with all the spacing:

.sm-page-widget-5387361 .sm-page-widget-nav-horizontal li:nth-child(1){
float:left;
margin:0 0px 0 55px;
padding: 0 60px 0 0;
}
.sm-page-widget-5387361 .sm-page-widget-nav-horizontal li:nth-child(2){
float:left;
margin:0px 0px 0px 0px;
}
.sm-page-widget-5387361 .sm-page-widget-nav-horizontal li:nth-child(3){
float:right;
margin:0 0px 0 85px;
padding: 0 30px 0 0;
}
.sm-page-widget-5387361 .sm-page-widget-nav-horizontal li:nth-child(4){
float:right;
margin:0px 0px 0px 0px;
}

Cheers!

AceCo55 · March 11, 2014

Thanks for taking the time to post your code - I'm sure others will appreciate that in the future
And Mike - yes you are a coding hero. Without your generosity, and the other SmugMug coding volunteers, a huge number of us wouldn't have the sites we wanted.

Hikin' Mike · March 11, 2014

Glad I had a small part in making this work. When I read the other Mike mention the `nth-child` it occurred to me to use that. Just last night I was helping Keith (ko04) with different issue, but I used `nth-child` too. I use it on my home page and custom Portfolio pages. I'm still green using this, but thought I'd post that code last night before I went to bed or forgot about it.

Individually adjust menu item spacing

Comments