Displaying web element based upon monitor width

HTML & CSS
1

I have built a website http://parishes.rcda.org/holy_family_parish/

I’m having trouble with the navigation bar disappearing when the site is viewed on wide screen desktop monitors.Below i the code that hides and shows the horizontal nav bar.

<div id="nav" class="nav-header ten columns hide-for-small hide-for-medium show-for-large show-for-xlarge" >

I’ve tried show-for-xlarge-up and show-for-xxlarge and can not get the menu bar to display. I tried searching for a list of show-for options but can’t find it. How do I make the bar show for super large wide screen desktop monitors?

2

Additional searching on the web showed me that I need to use show-for-large-up and remove show-for-large and show-for-xlarge. Now the navigation menu shows up as expected and does not disappear on extra large desktop monitors.

1 Like
3

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