WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Twenty Twelve remove space between wp-menu items (16 posts)

  1. rdg@me.com
    Member
    Posted 1 year ago #

    http://www.richardgraham.it/mics/

    I can't for the life of me find where the space comes from between menu items in the wp-menu

    in style.css:
    '.main-navigation li {
    margin: 0 40px 0 0;
    margin: 0 2.857142857rem 0 0;
    position: relative;
    }'
    puts 40 pixels of space to the left of each successive 1st level menu item which I've over-ridden in my child theme with:
    '.main-navigation li {
    margin: 0;
    position: relative;
    }'

    Then I've added padding to each menu item with:

    '.main-navigation li a {
    border-left: 1px solid rgb(68,122,170);
    border-right: 1px solid rgb(68,122,170);
    line-height: 3.692307692;
    text-transform: uppercase;
    font-weight: bold;
    color: rgba(235,235,235,1);
    text-shadow: 1px 1px rgba(70,70,70,1);
    padding: 0 16px 0 16px;
    padding: 0 1.142857143rem 0 1.142857143rem;
    }'

    I've been through ever other part of the original css file and my child theme and I can't find anywhere where padding, margins or borders creates what looks to be about 6-8px of space between the menu items. In the code above I've used left and right borders to help illustrate the problem.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you using a Child Theme or Custom CSS/Styles plugin?

  3. rdg@me.com
    Member
    Posted 1 year ago #

    Child theme

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I think that space is just added by having borders

    .main-navigation li a {
     border-left: 1px solid #447AAA;
     border-right: 1px solid #447AAA;
     ...
    }
  5. rdg@me.com
    Member
    Posted 1 year ago #

    no the space is there with or without those borders - I only put those in the css to illustrate the problem - it's the space between them that IS the problem and I can't find where it's coming from.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    I disabled the space you added and the borders, and achieved this
    http://snag.gy/hAERx.jpg

    Is the space left what you're enquiring about?

  7. rdg@me.com
    Member
    Posted 1 year ago #

    yes that's it - I've just commented out the style '.main-navigation li a' as a test and got the same - that is the space I want to get rid of but don'e know how

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    That's because you've displayed block those anchor tags (within the menu) and floated them left.
    Really you should be floating the <li> elements left, not the anchor tag. Correct this.

  9. rdg@me.com
    Member
    Posted 1 year ago #

    That's cos I don't really know what I'm doing; something backed up by the fact I don't understand your answer!

    In trying to understand I did searches for 'float: left;' - (no results in any of the styles relating to the menu) and 'display: inline-block'

    There are two but I haven't added these - they are in my child css file but are also in the TwentyTwelve style.css file!

    I've added nothing to float any elements in the menu and not changed any 'display:' settings.. I've put lots of floats in other parts of the page but none in the menu.

    I don't know what an anchor tag is but realise from your reply that:

    '.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border: 0;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    }'

    and

    '.main-navigation li {
    display: inline-block;
    text-decoration: none;
    }'

    are the things I'm going to need to change..

    Here goes...

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Float left your <li> elements.

  11. rdg@me.com
    Member
    Posted 1 year ago #

    '.main-navigation li a,
    .main-navigation li {
    /* display: inline-block; */
    text-decoration: none;
    float: left;
    }'

    appears to have done it. Thank you very much. I really do wish I understood more than I do but, with your reply, you have given me some starting points for further reading. As I say. Thanks very much.

  12. rdg@me.com
    Member
    Posted 1 year ago #

    Thanks again Andrew

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    That's okay, I made a wrong assumption that you were floating left your anchor tags. Sorry.

  14. rdg@me.com
    Member
    Posted 1 year ago #

    The only thing that's 'floating' is my bloody head trying to write css and php when I haven't really got a clue what any of it means! Oh and then translate the site content into a language I don't understand well enough to know if it's right or wrong. So many different language problems! Enjoy your Friday night.

  15. nosey1
    Member
    Posted 1 year ago #

    Hi

    I have the same problem as rdg, where I can't seem to remove the space between the top level menmu items in wp-menu

    I have tried the code that rdg posted but the white space remails between menu items.

    '.main-navigation li a,
    .main-navigation li {
    text-decoration: none;
    float: left;
    }'

    My knowledge of css is basic and I am overwhelmed by the sheer number of classes, id tags and selectors when i inspect the menu with firebug.

    I've searched but can't seem to find an explanation of how each one works/interacts in wp-menu. I'm trying to learn it properly as I have several projects in the pipeline and need to learn this stuff properly.

    Thanks in advance :)

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @nosey1 - this thread is old and already marked resolved, so please start a new thread per http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    You can do so here: http://wordpress.org/support/forum/themes-and-templates#postform

    Note that you must use a Child Theme or custom CSS plugin to make changes to twentytwelve, and you also need to post a link to your site for help with CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic