Title: (CSS) Modifying menu links Last modified: August 21, 2016 --- # (CSS) Modifying menu links * [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/) * I’m using a child theme of the twenty twelve theme. * I have quite a lot of thinks in the menu bar (for static pages, basically where you find “home”), so that one of the links has gone a line below the other ones. * I’m wondering how I could change the space that is between the links, basically make it narrower? I’ve looked into the source code and it seems like it should be **nav-menu** or **page_item page-item-6** (or any other number). * I don’t see to see any attributes for the space between the words, however. Could anyone help me out here? 🙂 Viewing 15 replies - 16 through 30 (of 36 total) [←](https://wordpress.org/support/topic/css-modifying-menu-links/?output_format=md) [1](https://wordpress.org/support/topic/css-modifying-menu-links/?output_format=md) 2 [3](https://wordpress.org/support/topic/css-modifying-menu-links/page/3/?output_format=md) [→](https://wordpress.org/support/topic/css-modifying-menu-links/page/3/?output_format=md) * [Bush](https://wordpress.org/support/users/manishkumarruhil/) * (@manishkumarruhil) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875623) * 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? * Thread Starter [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875630) * 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 😉 * [Bush](https://wordpress.org/support/users/manishkumarruhil/) * (@manishkumarruhil) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875632) * Ok go through the whole process again and tell me. * Thread Starter [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875635) * 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… * [Bush](https://wordpress.org/support/users/manishkumarruhil/) * (@manishkumarruhil) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875636) * 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. * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875638) * > 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’) * Thread Starter [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875647) * ``` 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 🙂 * [Bush](https://wordpress.org/support/users/manishkumarruhil/) * (@manishkumarruhil) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875661) * You probably are missing something or making errors. Wait for my next response. * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875662) * The tabs make no difference at all. The `left` and `right` are invalid CSS code in that context. * Thread Starter [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875665) * Well, I tried getting rid of them, but no difference! * Thread Starter [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875667) * 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? * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875668) * 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. * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875669) * 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. * Thread Starter [Foliferous](https://wordpress.org/support/users/revs/) * (@revs) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875670) * 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 🙂 * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/2/#post-3875671) * I don’t think it’s possible to use CSS to make a “dynamic” menu as you describe. Viewing 15 replies - 16 through 30 (of 36 total) [←](https://wordpress.org/support/topic/css-modifying-menu-links/?output_format=md) [1](https://wordpress.org/support/topic/css-modifying-menu-links/?output_format=md) 2 [3](https://wordpress.org/support/topic/css-modifying-menu-links/page/3/?output_format=md) [→](https://wordpress.org/support/topic/css-modifying-menu-links/page/3/?output_format=md) The topic ‘(CSS) Modifying menu links’ is closed to new replies. * 36 replies * 6 participants * Last reply from: [Bush](https://wordpress.org/support/users/manishkumarruhil/) * Last activity: [13 years, 3 months ago](https://wordpress.org/support/topic/css-modifying-menu-links/page/3/#post-3875686) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics