I'm having issues with my Bootstrap mega-menu.

1. if the sub-menu block is set to max-width=100% some of the columns wrap which is bad. if I keep it at width=100% there is too
much white space on the four and 1 column menus, the five column is crowded. How can I make the mega-menu adjust to the the
longest line of text for the columns and then size the menu around that?

2 Is there a way to change from hover menu to drop-down for mobile only? I'd like to make the top level menus drop down to help
keep scroll length down.

3. I really would like this menu to start off floating and then on scroll it affixes to the top. I know bootstrap allows this, but when I tried to do it it
caused alot of problems. How could I incorporate this?

I have a codepen: Hover Mega-Menu

Any help would be appreciated! I've been trying to get this ready for a few days now, but have hit a standstill currently.