Dropotron not working on certain screen sizes

framework
bug

#1

When hovering over “About”, dropotron doesn’t show up for screen sizes larger than 1400px. Anything smaller, it will open center and to the left (normally opens center and to the right). Any recommendations on how to fix?

Thanks


#2

Hey morgangreenwalt,

i am going to go ahead and see if I can reproduce this myself today. as well I will ask the high up zesty people to see what they think might be an issue as well. thanks for asking the question.


#3

Super weird issue. I haven’t looked into it in-depth but my guess is it’s because the dropdown goes outside of the site structure and that effects the javascript plug in somehow. There are a couple quick fixes that could work. You could rearrange the navigation so the about item is to the left of media. Less quick but more permanently, you could update the dropdown styling so that each item is on it’s own line and it grows down instead of to the right.

Let me know if those work for you, or if it needs more accurate debugging.


#4

Hi Dustin,

Thanks for the response & I’m sorry I’m so late to reply!

If rearranging the dropdown and changing design (to drop down instead of extend across) is not an option, what should I look at next?


#5

Hi Morgan,

If those aren’t an option, we’ll have to look at modifying the style or javascript. You can try adding this styling to the bottom of your style sheet:

.about.dropotron.level-0 {
    left: initial !important;
    right: 0 !important;
}

That should work but it’s definitely not best practice. It’s something you’ll have to keep an eye on if you ever change the navigation.