WordPress.org

Forums

Customizr
turn menu bar into 2 columns (6 posts)

  1. rollerh4
    Member
    Posted 11 months ago #

    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!

  2. rollerh4
    Member
    Posted 11 months ago #

    EDIT: float: none;

  3. rdellconsulting
    Member
    Posted 11 months ago #

    Link to your site?

  4. rollerh4
    Member
    Posted 11 months ago #

  5. acub
    Member
    Posted 11 months ago #

    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.

  6. rollerh4
    Member
    Posted 11 months ago #

    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 :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags