(CSS) Modifying menu links

have you added css codes below in your style.css. If you had than are you sure you have not missed the dot sign (.) while copying them?

Yes they are copied in the child style.css, which (.) do you mean, the one that defines classes just like (#) defines ID’s? In case that’s what you mean, no I haven’t forgotten it!

I’ll take another look now, my brain is “fresher” than yesterday night so let’s see what I can find ??

Ok go through the whole process again and tell me.

I tried everything from the start again, step by step, and I used colour: red; on .abcde to test the “connection”, but it still won’t work. I’m wondering what I’m doing wrong…

Have you copy and pasted codes? If so than in front of every code value press [TAB]. eg:

.abcdef {
[TAB]color: blue;
[TAB]float: right;
[TAB]left: auto;
{TAB]right: 0;
}

try this and tell me its effect.

change the space that is between the links, basically make it narrower?

get a browser inspection tool (such as Firebug or whatever your browser provides) to really inspect the css selectors of the menu items;

the spacing of the menu items is set in style.css of Twenty Twelve:

.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}

reduce that right margin to get the menu items closer to each other;

in style.css of the child theme, add for example:

.main-navigation li {
		margin-right: 30px;
		margin-right: 2.1rem;
	}

then make sure to clear the browser cache to see the results (press CTRL F5 or ‘reload’)

Have you copy and pasted codes? If so than in front of every code value press [TAB]. eg:

.abcdef {
[TAB]color: blue;
[TAB]float: right;
[TAB]left: auto;
{TAB]right: 0;
}

try this and tell me its effect.

Yes I did, and yes I pressed TAB to leave some space at the front, I don’t think it should do a difference, however? At least I don’t see any.

@ alchymyth: We actually discussed this already, but what I’m looking for is more complex than that ?? So thanks. I think manishkumarruhil is on the right path, however ??

You probably are missing something or making errors. Wait for my next response.

The tabs make no difference at all. The left and right are invalid CSS code in that context.

Well, I tried getting rid of them, but no difference!

I tried setting a totally different CSS class to another page. Still doesn’t work, no matter what I try (colour, size, text-decoration…), I don’t believe it is that there is “no connection” between the menu and the CSS, but more like whatever I type is being overwritten by another CSS setting. See what I mean?

Try taking alchymyth’s advice – he tends to know what he is talking about (major understatement).

It’s extremely difficult to help with CSS questions without seeing a site live, so if you need ongoing help with CSS, I’d strongly suggest that you upload your site so people can see what’s going on.

If nothing is working, you probably have a CSS syntax error someplace or your CSS is not correct or your selectors are not specific enough.

There is no syntax error. The only CSS I have is what was posted above already.

What alchymyth posted wasn’t exactly what I was looking for, manishkumarruhil had already posted this solution before — it will change the gap between words, but it won’t make a dynamic / variable menu. Which means when I add menus it won’t squeeze it all together, instead the links will be dropped on a line below and I will have to change the size of the gap again to make it fit perfectly. However, I still do appreciate it a lot ??

I don’t think it’s possible to use CSS to make a “dynamic” menu as you describe.