Support » Themes and Templates » turn menu bar into 2 columns

turn menu bar into 2 columns

  • Hello everyone. As the title says, I am trying to turn my menu bar into 2 columns, where each will contain some of the elements of the menu bar.

    What I have managed to do by now is change the orientation and just make the menu appear like a column by changing the float to none using that:

    .navbar .nav > li {
    float: left;

    But how will I split them to 2 ?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • EDIT: float: none;



    Link to your site?

    1. Remove all menu related custom CSS.
    2. Inspect the page and pick your line breaking element (let’s assume it is li#menu-item-596)
    3. Add clear:left to it for browser widths above 979px:

    @media (min-width: 980px) {
    	li#menu-item-596 { clear: left; }

    Edit: I wasn’t paying attention to the request. The above code turns the menu into two rows, not two columns.

    It can be adjusted to turn it into two columns, but why would you want that, lol?

    Here’s how:

    @media (min-width: 980px) {
    	#menu-basic-menu > li:nth-child(2n+1) {
    		clear: left;
    		min-width: 150px;

    Adjust min-width to be greater than your widest element from left column if you want right elements to be all aligned and also to adjust the distance between columns.

    Actually I didn’t see your edit in time, so I managed to do it with this code:

    @media (min-width: 980px) {
            li#menu-item-596 {
            	clear: left;
    		padding: 0 78px

    Anyway, thanks a lot! Just playing with my website’s homepage 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘turn menu bar into 2 columns’ is closed to new replies.