Support » Theme: Twenty Twelve » Menu padding between top and bottom hr

  • justinline

    (@justinline)


    Hello . . . Does anyone know how to reduce the gap (padding) between the Menu choices and the top / bottom borders of the .main-navigation? I’ve set the margins and padding to zero, with no affect. Tried the ul and li too. Can’t get it to work. Any response is greatly appreciated.

    Thank you

Viewing 12 replies - 1 through 12 (of 12 total)
  • You need to change the line-height attribute on the anchor tags.

    The default code should look something like:

    .main-navigation li a {
    		border-bottom: 0;
    		color: #6a6a6a;
    		line-height: 3.69;
    		text-transform: uppercase;
    		white-space: nowrap;
    	}

    It should be on line 1492. Just change the line-height to your liking. Hope it helps!

    EDIT: I’m sorry, just noticed you were also asking for the gap between each link. That can be changed using the li:

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

    Just change the 2.857142857rem to anything you want.

    Moderator Andrew Nevins

    (@anevins)

    @gezim, I changed it that way before and when the theme updated I lost all my changes. Do you know another way?

    WPyogi

    (@wpyogi)

    Forum Moderator

    EDIT – cross-posted with Andrew :)!

    @gezim Basha – what happens to that change when WP is updated?

    WPyogi

    (@wpyogi)

    Forum Moderator

    @justinline – please post a link to your site for help with CSS questions.

    @andrew, you could perhaps use your own stylesheet, which defines modified classes and load it after the main stylesheet on the header. After updates, all you’d have to do is re-insert the link on your header.php and you’re done (assuming class names won’t change)

    @wpyogi, they get deleted?

    WPyogi

    (@wpyogi)

    Forum Moderator

    @wpyogi, they get deleted?

    Yes, which is why it’s not a good idea to modify theme files – changes should be made in a child theme or using a custom CSS plugin.

    http://codex.wordpress.org/Child_Themes

    justinline

    (@justinline)

    Here’s the site in question:
    http://sonoranlandesign.com/site/

    Thank you for your responses!

    justinline

    (@justinline)

    @gezim Basha thank you, but it’s not working for me. I am looking to reduce the space between the top and bottom borders and the menu text. No padding or margin edits are changing it. Line height changes aren’t working either.

    Thanks again

    justinline

    (@justinline)

    I got it. The child CSS wasn’t affecting the spacing I was looking for. When I changed it in the parent theme CSS, it worked. Thank you.

    Moderator Andrew Nevins

    (@anevins)

    @justinline, that CSS Gezim recommended won’t work in a Child Theme style.css because the way Child Theme styles work is they override the parent theme.

    As Gezim just removed the line height:

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

    The style was not overriding anything.

    To override the parent theme’s line-height you need to set your own, e.g:

    .main-navigation li {
     line-height: 0;
    }

    @justinline You should use the Child Theme. Take a look at your code again, it should override.

    @andrew Nevins I haven’t changed anything. The code I posted is taken straight from the theme. The line-height has to be overriden for the hyperlinks.

    .main-navigation li a {
     line-height: x;
    }

    Where x is the amount of line-height he wants. I specified that 3.69 is the default.

    Moderator Andrew Nevins

    (@anevins)

    @gezim, it looked like you advised to remove the line height in your second code example, sorry.

    That is what @justinline did by the way, @justinline just removed the line-height style from the parent theme’s stylesheet. You can see when you inspect the code on the site.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Menu padding between top and bottom hr’ is closed to new replies.