How do I adjust the space between main menu items?

[DianeClancy]

ok – made the sandbox for the site –

http://dianeclancy.com/sandbox/

so secondary is on top
mini is in middle
primary is on bottom

I want it where the mini is except with spacing between menu items

Thank you so much again!!  ~ Diane Clancy

[scrambler]

If you are happy with the the mini menu, you can space its item with the rule below (in the Theme Custom CSS Rule box)

#nav-header-mini a {padding:0 10px;}

[DianeClancy]

Oh thank you so very much, Scrambler!!!  I will try that in the morning!!  🙂

You rock!! ~ Diane Clancy

[DianeClancy]

Oh great, Scrambler!!  It worked!!  Dancing 🙂  Thank you!!!

And she wants links underlined and I put this
a:active {
    text-decoration: underline;
}
is the Theme Custom CSS Rule box but no links appear – do you mind if I ask you about this too?

Thank you so very much again!!  ~ Diane Clancy

[scrambler]

If she wants the links in the menu underline put the rule below in Main options > Menus > HEader Mini menu > Mini Menu BG CSS+ box

a {text-decoration:underline;}

[DianeClancy]

Thank you, Scrambler – that didn’t work – not sure why …

I had put this there before
a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

and that didn’t work either – I think I am going to let that one go because I think it looks a lot better and plenty clear without them 🙂

You have been most kind in giving me all this help!!  Thank you so very much!!!!  🙂  They look great now 🙂  ~ Diane Clancy

[scrambler]

Ok, but if you do decide to make it work, place the rule I gave you where I told you and post back so we can see why it does not work as it does on my test site

[DianeClancy]

Thank you, Scrambler – I would like to know how to do it right 🙂 

Here is the place
http://dianeclancy.com/sandbox/
and I *think* I did it right 🙂

Thank you again for all your help!!!  ~ Diane Clancy

[scrambler]

That is because you did not combined the two rules.

You put in

a {padding:0 7px;} a:hover {text-decoration: underline;}

Which generates

#nav-header-mini a {padding:0 7px;}
a:hover {
    text-decoration: underline;
}

So the selector is missing on the second one.

This is because the theme add the options selector once in front of everything that is in the box.

When you have multiple properties with the same selectors, combine them in the same curly bracket. So if you want the underline all the time, use

a {padding:0 7px;text-decoration: underline;}

When you need different added selectors (like it is the case here if you only want it on hover) you need to add the selector variable, so what you need to put in the box is

a {padding:0 7px;} %selector% a:hover {text-decoration: underline;}

[DianeClancy]

Great Scrambler!!  Thank you for teaching me this 🙂  I had never used CSS in a theme before so didn’t understand those issues 🙂  🙂  You *are* the best!!  🙂

But hmmmm it didn’t totally work for me …
This by itself underlines all links great
a {padding:0 7px;text-decoration: underline;}

a {padding:0 7px;} %selector% a:active {text-decoration: underline;} – does nothing for underline

adding #nav-header-mini in doesn’t make a difference

I need this {    list-style-type: none; text-align:left; float:left;   font-size: 125%;  } to make the sizing right
it doesn’t work if I put it afterward or in the other places I can find

jeepers  – I hope I am not bugging you too much – when I take everything out and just put in this
a:active {
    text-decoration: underline;
}
it doesn’t do anything either …

I am thinking the active link is the page one is currently on – right?

(I went back to W3Schools and tried to see where I was going wrong to make sure I understood)

So I amputting this back in to show you
a {padding:0 7px;} %selector% a:active {text-decoration: underline;}

I have made dozens of new pages (now all deleted) since I was getting erratic results from refreshing and then started doing this very methodically – I have spent a couple of hours doing this

It is ok if you are finished with this …. and I would like to know what I am doing wrong if you so desire.

Thank you so much again Scrambler for your patience and kindness!!!  ~ Diane Clancy

http://dianeclancy.com/sandbox

[scrambler]

You need to explain when you want the underline. I don’t believe a:active {text-decoration: underline;}  would do anything. Your initial post (and my example) mentioned a:hover which is different, so please clarify.

I don’t see why you want

list-style-type: none; text-align:left; float:left;  

As these have no use on that menu. Again if you are trying to solve an issue tell us what the issue is.

To change the size, add it in the first part

a {padding:0 7px;font-size: 125%;} %selector% a:hover {text-decoration: underline;}

If you wanted the menu to be on the left use

{float:left;} %selector% a {padding:0 7px;font-size: 125%;} %selector% a:hover {text-decoration: underline;}

So focus on telling us what you want to change from what is there

[DianeClancy]

Oh good – {float:left;} %selector% a {padding:0 7px;font-size: 125%;} %selector% a:hover {text-decoration: underline;}
got me back to where I needed to be with the menu with the look … sorry to be so silly about not being clear, Scrambler!!!!

I didn’t realize all those things could go together!!

What she wants is an underline of the link for the page that is current … I can see I sent us on a wild goose chase – again I so appreciate your patience!!  Editing a theme so deeply in this way is new to me – it was years before I used widgets when they came out – I am behind

Is *that* any clearer?  Thank you so much again!!!  🙂  🙂  ~ Diane Clancy

[scrambler]

To style the current page you would need a rule

#nav-header-mini .current-menu-item a {text-decoration:underline;}

So you can add it to the current CSS+ box with

{float:left;} %selector% a {padding:0 7px;font-size: 125%;} %selector% .current-menu-item a {text-decoration: underline;}

This rule in the CSS+ box would be the same as the rules below in Main Options > FOnts & Custom > Custom CSS Rule box

#nav-header-mini {float:left;} 
#nav-header-mini a {padding:0 7px;font-size: 125%;} 
#nav-header-mini .current-menu-item a {text-decoration: underline;}

[DianeClancy]

Perfect Scrambler!!  oh my goodness!!  I put it both places and now it works perfectly!!  I know you have helped me a ton and I am so thankful!!

You are most generous!!!  🙂  🙂  🙂  Whew!!!!  ~ Diane Clancy

[scrambler]

@DianeClancy

“I put it both places and now it works perfectly!!  “

Do NOT put it in both places! Either one or the other. Duplicate rules can only slow things down 🙂

[DianeClancy]

@Scrambler, I just saw this!!  Thank you – I have now taken it out of the Mini-header menu and left it in the

Main Options > FOnts & Custom > Custom CSS Rule box

Thank you once again!

[Author]

Posts