Javascript multiple columns question

[M_Lyons10]

Good afternoon everyone!

I am NOT strong with javascript at all, and was trying to do something today and having no luck whatsoever.

 

I have drop down menus from the navigation on my site and one of them is getting too long (on desktop).  I wanted to, if the nav ul has more than 8 items in the list for it to show as two separate columns. 

 

Here is the javascript from the navigation now:

 

            $('#nav > ul').dropotron({
                offsetY: -16,
                mode: 'fade',
                noOpenerFade: true,
                hideDelay: 400
            });

 

I would assume that this would need to be done in the javascript since I attempted to edit the css and that did not work.  Just for clarity, here is the CSS:

 

  #nav {
    position: absolute;
    right: 2.5em;
    top: 0; }
    #nav ul li {
      float: left;
      margin-left: 1.5em;
      height: 7em;
      line-height: 7em; }
      #nav ul li a {
        color: #fff;
        -moz-transition: background-color .25s ease-in-out;
        -webkit-transition: background-color .25s ease-in-out;
        -ms-transition: background-color .25s ease-in-out;
        transition: background-color .25s ease-in-out;
        color: #ccc;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        padding: 0.55em 1.4em 0.55em 1.4em;
        border-radius: 6px;
        outline: 0; }
        #nav ul li a:hover {
          color: #fff; }
      #nav ul li.current_page_item a, #nav ul li.active a {
        background: #20242A;
        color: #fff; }
    #nav > ul > li > ul {
      display: none; }

 

I'm open to suggestions as well.  I'm just trying to have the menu be a little easier to navigate.

 

Thank you for your help!

 

[Seahorsepip Veteran]

Is a link to the site in question possible so were can see the problem?

[M_Lyons10]

On 8/7/2019 at 6:57 PM, Seahorsepip said:

Is a link to the site in question possible so were can see the problem?

Sure, absolutely!

 

Website

 

I also looked into doing this through CSS, but have not had any luck with that either.

 

Thank you for your help!

[jimbobs]

Off topic, but why do you have the page title flash "1 new message"?

[M_Lyons10]

4 hours ago, jimbobs said:

Off topic, but why do you have the page title flash "1 new message"?

That's just the auto-prompt from the chat.  I didn't realize it was setting the page title actually.  I'm going to look into changing that for sure...

Thank you for pointing that out.