WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Menu padding between top and bottom hr (13 posts)

  1. justinline
    Member
    Posted 6 months ago #

    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

  2. Gezim Basha
    Member
    Posted 6 months ago #

    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.

  3. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 6 months ago #

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

  4. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    EDIT - cross-posted with Andrew :)!

    @Gezim Basha - what happens to that change when WP is updated?

  5. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

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

  6. Gezim Basha
    Member
    Posted 6 months ago #

    @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?

  7. WPyogi
    Volunteer Moderator
    Posted 6 months ago #

    @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

  8. justinline
    Member
    Posted 6 months ago #

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

    Thank you for your responses!

  9. justinline
    Member
    Posted 6 months ago #

    @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

  10. justinline
    Member
    Posted 6 months ago #

    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.

  11. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 6 months ago #

    @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;
    }
  12. Gezim Basha
    Member
    Posted 6 months ago #

    @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.

  13. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 6 months ago #

    @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.

Reply

You must log in to post.

About this Theme

About this Topic