Navbar Menu in 2 columns

  • Resolved Mackiwu

    (@mackiwu)


    9 years, 12 months ago

    Hello,

    i searched long time in different forums but i couldnt find a working solution for set the Navbar Menu in Customizr in 2 Columns as there are too many items in it. I tried it with that code:

    .navbar .dropdown-menu > li > a {
width: 200px;

.sub-menu-columns ul.dropdown-menu li {
    display: inline-block;
    float: left;
    width: 90px;
}
.sub-menu-columns ul.dropdown-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
.sub-menu-columns ul.dropdown-menu li:nth-child(even) {
    float: right;
}

    It appeared a bit weird. Is any working solution out there? Some help would be really great. This is my site.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Mackiwu

    (@mackiwu)

    No Ideas ??? No one ???

    I think that a more correct css would be something like this:

    .navbar .dropdown-menu {
width: 300px;
}
ul.dropdown-menu li {
    display: inline-block;
    float: left;
    width: 140px;
}
ul.dropdown-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
ul.dropdown-menu li:nth-child(even) {
    float: right;
}

    Also I suggest you to wrap the code above in a media query:

    @media (min-width: 980px){
/* put the code above here */
}

    to limit this behavior just to desktop viewports, in small devices will be a great mess.
    Though dunno if this is the best solution anyway, you might want to try some plugin like megamenu or something of the sort.

    Thread Starter Mackiwu

    (@mackiwu)

    Thanks d4z_c0nf,

    your solution work great, that is what i was looking for all the time ??
    Now it appears fine! You made my day !

    Mackiwu

    Glad you solved ??
    Would you mind marking this topic as resolved?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Navbar Menu in 2 columns’ is closed to new replies.