[Resolved] Spacing between navbar items

Home Forums Support Spacing between navbar items

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #106815
    Adrian Cojocariu

    I want some space between the navbar items

    I know I can put them in spacing, the problem is I want the background of the header instead of the background of the navbar.

    Just like they were separate buttons to click them.

    I managed to do that by adding a border of the same color as the header background to the li.


    .main-navigation {
    margin-top:10px;
    }
    .main-navigation li.menu-item {
    border-style: solid;
    border-width: 5px;
    border-color: #ffffff;
    }

    Is there any other … better way to do it ?

    #106872
    Tom
    Lead Developer
    Lead Developer

    How about this:

    .main-navigation .menu > li {
          margin-right: 5px;
    }
    
    .main-navigation .menu > li:last-child {
          margin-right: 0;
    }
    #106905
    Adrian Cojocariu

    Nah, it does affect the margins, but the space between them still is the navbar background color. Note that it’s a floating right navmenu, but I changed it to normal and still no effect.

    Borders seem to still seem to give that effect.

    #106906
    Adrian Cojocariu

    This affects the mobile menu too as well , giving some border around it which doesn’t really bother me but I’d like it full width.

    #106911
    Tom
    Lead Developer
    Lead Developer

    Hmm yea, you would have to remove the background color from the main navigation:

    @media (min-width:769px) {
          .main-navigation, .main-navigation ul ul {
                background: transparent;
          }
          .main-navigation .menu > li {
                margin-right: 5px;
          }
          .main-navigation .menu > li:last-child {
                margin-right: 0;
          }
    }
    #106940
    Adrian Cojocariu

    HuyHay that works !

    The other menu items backgrounds were transparent too though, but I fixed that by adding background color:


    .main-navigation .menu > li {
    margin-right: 5px;
    background-color:#blahblah;

    One last thing, is there any other way to vertically align the navmenu in the header ? Instead of using :


    .main-navigation {
    margin-top:10px;
    }

    It’s not really centered this way 🙂

    #106997
    Tom
    Lead Developer
    Lead Developer

    Vertical alignment of elements like these can really only be achieved using javascript. You’re better off finding the true vertical center using margin.

    #107019
    Adrian Cojocariu

    Ok, so I thought, thanks.

    #107054
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.