(CSS) Modifying menu links

Hopefully you can link to the webpage you’re referring to.

Otherwise all we can do is guess:
Is it margin?
Is it padding?

Are you using a developer tool like Firebug? That should tell you.

Try making changes in below given coding. You can find it in your style.css

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

40px or 2.857142857rem are determining space between two menu items. Try changing them. You can get rem value by using following formula (take help of calculator in your pc or type ‘calculator’ in google):

rem = px/14 (particularly just for your mentioned theme)

Eg:- if you want margin to be reduced to 28px than rem value will be 28/14 = 2. It is very important to keep px and rem value in proportion else different browser will display contents on your website differently.

Yessss it worked! thanks manish ??

I should put in my signature that my site is localhost BTW, so I can never post it sadly. It seems like there’s no signature function, however!

BTW, do you know if there’s a way so the full width of the line is always used? Basically to not make them jump one line and to change the space dynamically in function of how many links there are, you know?

Do you mean making paragraphs look like a rectangular box and not having different spaces at the end of lines.

Change:
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}

To:
body {
font-size: 14px;
font-size: 1rem;
text-align: justify;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}

Notice that I have added a code line:

text-align: justify;

If this is not what you meant than please clarify.

I’m not sure if it is what I mean, I’ll have to test it first ??

What I mean is that: now that I can choose the space between the menu links it’s fine, however I would have to mess a lot to get the link that is the most at the “right” to fit with the right of the page. (Basically to be exactly at the edge of it, just like the link that is the most at the “left” is at the edge as well).

So I thought a variable thing would not be bad, you know. Say I add to more links, then the spaces between the links become smaller but the link at the right is still at the edge. Now let’s say I would remove ten links, then the spaces / the gap between the links would become much bigger, while keeping the link at the very right still at the edge. Do you see what I mean? ??

Ok, so you did not meant that. Now what I am writing, follow these steps very carefully:

1. remove both code lines of margin (in px & rem) but copy them somewhere.

2. go to appearance -> menus and create a custom menu. Name that anything like ‘navigation bar’ and save/create menu.

3. Now from left column select ‘primary menu’ as ‘navigation bar’ or whatever you have named it.

4. add links from same column (are below ‘primary menu’ thing) to your menu bar by selecting or typing in URL/pages/category and click ‘add to menu’.

5.drag menu to up and down to arrange them in order (don’t worry they will be displayed horizontally).

note: dragging a menu slightly to right below a menu makes it a sub-menu (drop down menu).

6. click ‘screen options’ from top-right corner, check the box ‘CSS Classes’ and than click ‘screen options’ again.

Wait for my next response and meanwhile do these steps mentioned above.

Thanks! Just a question, before I even do the first step. Do I remove px & rem from my child theme or from twenty twelve? From the child theme I guess?

Never edit the Twenty Twelve theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. Always make your changes in your child theme.

Yep that’s what I thought.

So I’ve just followed the steps and wow! I didn’t know it works this way as well. Very nice! I had looked for tricks how to modify the “home” button before and I had actually found tricks, all of this wasn’t necessary I guess since I could have just simply done this. Definitely much more effective.

Now what can I do so they are always at the edge of the site and how can I have variable spaces / gaps? ??

7. now click the below pointing arrow (v) of all the main menus (not sub menus) one by one.

8. select last input box in each menu (css classes (optional)) and type in ‘abcde’ except in the last menu. There type ‘abcdef’.

9. now go to style.css and at the end add the following codes:

.abcde {
margin-right: 28px;
margin-right: 2rem;
float: left;
left: 0;
right: auto;
}
.abcdef {
float: right;
left: auto;
right: 0;
}

Change margin as per your requirement (how many links are there is menu bar). If margin is more than your menu will split to next line. If your margin is less than you will have more space in between all menus and the last one menu.

Tip: keep margin 3px less than what exactly it fits at. eg if you have 5 menu (except the last one) and you have found a margin value which fits exactly i.e. increasing any more results in split up of menu bar. Lets say the value is 20px.

than 3 pixels less would be 20 – [5/3] = 20 – 1.66 = 18.33px.

This is because even if in your browser it show up correctly but in some other browser it may be splitting because of very minor difference in displaying.

if you have gap between last menu link and menu nlink before it just of 3 px more than of other than it will be rarely noticeable by people but it will make it work on multiple browsers.

———————————————————

The reason why we have done this is, without doing it and just using coding already in theme tells it to keep a specified margin on right. Even for last menu link which always keep a space at the end of menu which don’t look good (as you told and I also think)

If facing any difficulties than reply

You can add styling such as color, background etc. to them. Also you can give different color to all by making lots of css classes but keeping above specified code in each css class (first one in all and second one in last one only). Than naming ‘css classes’ in input box given separately.

Eg.
for home – > abcde

for page 2 -> abcdef

for last page -> abcdefg

and in css

.abcde {
font-color: #fff;
background: red;
margin-right: 28px;
margin-right: 2rem;
float: left;
left: 0;
right: auto;
}
.abcdef {
font-color: black;
background: #fff;
margin-right: 28px;
margin-right: 2rem;
float: left;
left: 0;
right: auto;
}
.abcdef {
color: blue;
float: right;
left: auto;
right: 0;
}

Alright, again before I start, first question… ??

I don’t have (css classes (optional)), the last input box for me is HTML-Attribut title (optional). Is that the right box?

Just making sure to do everything correct and step by step now!

Just tried it and it seems like it isn’t the same, I tried adding a colour like you said, but it didn’t change. Weird, I have no such CSS classes field then it seems? Or might it be hidden somewhere? I pressed the arrow already, but all I have is the title and the HTML Attribute box.

Read my second last response carefully. Its written there, the 6th step.

i.e.
6. click ‘screen options’ from top-right corner, check the box ‘CSS Classes’ and than click ‘screen options’ again.

This step is to be done on menus page (admin panel -> appearance -> menus)

Notify us if still having issue.

Oops, I seem to have missed this.

So I’ve done this now, but for some reason the margin and also the colour won’t work. As if they had no “connection”, yet I made sure I type “abcde” correctly, and in the right box. The code is just a copy & paste from you.

The sub menus are really cool by the way, didn’t even know of this function. You learn something new every day…