Streaming live at 10am (PST)

Making nav bar disappear on Tablet view and down


#1

I have a fixed dropdown menu bar that works great on the Desktop view, but I want it to not come up at all when on the smaller viewports.

When I open the built-in nav bar on the tablet view, it somehow triggers the hover interaction on the main header that causes the dropdown to show... so is there any workaround that would keep that from happening?

Thanks in advance!


Here is my public share link: https://preview.webflow.com/preview/ineedtoupgrade?preview=c3eaa1a5754c9c8c15913120bb70ba86

(how to access public share link)


#2

Hi @ilikewebdesign

For div "fixed dropdown" you can use option which will disable this element on tablet and mobile view:

Regards,
Anna


#3

Thx @sabanna! that worked!

Just out of curiosity, what is the difference between using these settings and setting the display to None in the normal styling options? Because that is what I tried first.

Does the method that you described overrule interactions?


#4

There is several levels of "styling priority".
1) CSS file with classes and styles. - MOST GENERAL PRIORITY (there is some hierarchy inside the file too)
2) CSS code snippet in head part of HTML document - HIGHER PRIOPRITY
3) Inline styling, when style settings added exactly inside the tag - HIGHEST PRIORITY
4) Using "!important" rule next to CSS value - OVERWRITE ALL OTHER PRIORITIES ( recommended to use only like emergency)

So when we using display:none option on class styling panel - we create CSS rule "General Priority". When you use that option on element settings panel (that I showed) we are creating inline styling which has "Highest Priority". And this setting can't be effected by interactions, because they operate classes (which styled in CSS file).

Hope I was able to explain :smiley:

Regards,
Anna


#5

Yep! That helped! Thanks!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.