Trying to align navigation CoursePress Pro

I am trying to get my navigation to align into columns and be justified. But not sure how. Any advice? The website is onlinecourses.mindfulness-exercises.net, its a development site, but I would like to put this into production once I can figure it out.

  • Adam Czajczyk
    • Support Gorilla

    Hello ME Admin,

    I hope you're well today and thank you for your question!

    I checked your site and there were two menus. The top one was enclosed within HTML table so I'm assuming that was your attempt to achieve what you described.

    I would however propose switching back to an original menu and using this CSS code instead:

    .menu  ul {width:100%;}
    .menu  ul li {width:35%;margin:10px 0 0 0px;padding:0;text-align:left;}
    .menu  ul li:nth-of-type(3n+1) {width:25%;margin:10px 0 0 0px;padding:0;text-align:left;}

    This is not complete though as it doesn't address drop-down sub-menus. This is because I wasn't able go anywhere further with this as it seems you have been making changes to your site at the same time and you did removed the menu.

    That said, why don't you give it a try and let me know so I could get back to your site and supplement this code with rules addressing drop-down sub-menus?

    Best regards,
    Adam

  • ME Admin
    • The Crimson Coder

    haha, if you can call that an attempt.. but thats exactly what I was trying to get done...DUDE! ADAM.. you are the man!! That worked perfect! I see what you're talking about with the drop down menu.

    Thanks for all your all help on this.

  • Adam Czajczyk
    • Support Gorilla

    Hey ME Admin,

    I'm glad I could be of help :slight_smile:

    I went back to your site and came up with following code:

    .menu .children li {width:100%!important;margin-top:0!important;}
    .menu .children li a {border-top:0!important;}

    Adding this right below the one I shared with you previously should take care of drop-down menus.

    And this additional two lines will get rid of "Home" menu element :slight_smile:

    .menu ul li:first-of-type {display:none;}
    .menu .children li:first-of-type {display:block;}

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.