Change space between 2 menu items

  • Resolved ibogo

    (@ibogo)


    10 years, 2 months ago

    We need to change space between 2 menu items only. So far, we tried adding a non-linked menu item colored black in between but the cursor still changes when hovering over. We need there just to be space so “Merchant Signup” can be underneath social media icons.

    Site: https://www.ibogo.club

    Thanks

    [ No bumping please. ]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter ibogo

    (@ibogo)

    Update: We found a temporary (non-optimal) solution that works for only 100% zoom with following CSS:

    .navbar .nav li#menu-item-19 a { padding: 5px 450px 0px 5px }

    This makes, however (we just realized this), the whole padding clickable too (plus only lines up where we want at 100% zoom).

    Is there a better solution?

    What about this solution (removing your css rule above) which is also pretty responsive?

    @media (min-width: 980px){
    .nav-collapse .nav {
        width: 100%;
    }
    li#menu-item-1107 {
        float: right;
        padding-right: 16%;
    }
}

    didn’t get the zoom part.

    Thread Starter ibogo

    (@ibogo)

    It affects any browser over or under 100% zoom. Isn’t @media only for phones, etc.?

    Summary:

    – We need “Merchant Signup” to be fixed under social icons
    – Current solution adds padding to right of “iBOGO” to create space between 2 menu items
    – This is OK but non-optimal; padding between the items is clickable and zoom and screen-size changes position of “Merchant Signup”

    Edit: We edited this a bunch of times to make it clearer.

    Did you try the solution above?

    Thread Starter ibogo

    (@ibogo)

    It works ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change space between 2 menu items’ is closed to new replies.