Got a legacy Shopify 1.0 store (https://www.arugforallreasons.com/) whose navigation drop downs no longer seem to work. Hover over Collections on Shop by Style and nothing appears. Seems that no matter what, the display stays at none. Not sure if this is something that can be corrected in CSS or JS, so I'll post both here along with some HTML.
HTML
<nav class="sixteen columns">
<ul>
<li class="first">
<ul>
<li><a href="/collections/new-arrivals">New Arrivals</a></li>
<li><a href="/collections/featured-rugs">Featured</a></li>
</ul>
</li>
</ul>
</nav>
CSS (style.css):
#pageheader nav {
border-bottom: {{ settings.color_nav_divider }} 5px solid;
font:{{ settings.font_nav_style }} {{ settings.font_nav_size }}px {{ font_nav_type }}, sans-serif;
margin-top:10px;
text-align:{{ settings.nav_align }};
}
#pageheader nav ul li {
margin-left:26px;
position:relative;
display: inline-block;
zoom: 1;
*display: inline;
}
#pageheader nav ul li.first {
margin-left:0;
}
#pageheader nav ul li .hasdropdown {
padding-right:15px;
{% if settings.theme_icons_mode_body == 'dark' %}
background:url({{ 'themeicons.png' | asset_url }}) right -215px no-repeat;
{% else %}
background:url({{ 'themeicons.png' | asset_url }}) right -306px no-repeat;
{% endif %}
}
#pageheader nav ul li.open .hasdropdown {
{% if settings.theme_icons_mode_body == 'dark' %}
background-position: right -171px;
{% else %}
background-position: right -261px;
{% endif %}
}
#pageheader nav ul ul {
display:none;
background: #242424;
padding-bottom: 5px;
position: absolute;
left: 0;
top: 36px;
z-index: 10000;
border-top:5px solid {{ settings.color_nav_divider }};
border-radius:0 0 3px 3px;
box-shadow: 0 1px 3px #000;
filter: alpha(opacity=90); /* ie */
opacity: 0.9;
}
#pageheader nav ul ul:hover {
display:block;
}
#pageheader nav ul li a {
color: {{ settings.color_body_nav }};
height: 36px;
line-height: 36px;
padding: 0 5px;
text-decoration:none;
display: inline-block;
zoom: 1;
*display: inline;
}
#pageheader nav ul li a:hover {
display: block;
opacity:0.7;
filter: alpha(opacity=70);
}
#pageheader nav ul ul li {
display: block;
margin: 5px 10px 0;
border-top: 1px solid rgb(67, 67, 67);
border-top: 1px solid rgba(67, 67, 67, .5);
}
#pageheader nav ul ul li:first-child {
border-top:0;
}
#pageheader nav ul ul li a {
color: {{ settings.color_body_link }};
height: auto;
line-height: 32px;
width: 160px;
padding:0 10px;
}
#pageheader nav #dropdownNav {
width:100%;
margin:10px 0;
padding:10px;
display:none;
}
JS ()
//Do certain things differently if touch events are enabled
if( ! !!('ontouchstart' in window) ? 1 : 0 ) {
//IF NOT TOUCH
//Scroll-to-top button for long pages
$(window).scroll(function(){
if(window.scrollY > 500) {
$('#scrolltotop').css('bottom', -8);
} else {
$('#scrolltotop').css('bottom', -100);
}
});
$('#scrolltotop').click(function(){
$('html:not(:animated),body:not(:animated)').animate({ scrollTop: 0}, 500 );
return false;
});
//Normal hover nav
$('#pageheader nav > ul > li').hover(function () {
$(this).find('ul, .notch').stop(true, true).fadeIn(100);
}, function () {
$(this).find('ul, .notch').stop(true, true).fadeOut(200);
});
//Preload all slider images (mobile hides slider, so don't do for that) - prevents browsers from not downloading hidden images
$('#mainslider li').each(function(){
var src = $(this).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
if(src.length > 6) {
var bigimg = new Image();
bigimg.src = src;
}
});
} else {
//IF TOUCH
//Clicky nav for tablets
$('#pageheader nav > ul > li > a').click(function () {
var $thisSubNav = $(this).siblings('ul');
if($thisSubNav.length > 0) {
var wasVisible = $thisSubNav.is(':visible');
$(this).closest('ul').children('li').removeClass('open').children('ul').fadeOut(200);
if(!wasVisible) {
$thisSubNav.fadeIn(100);
$(this).parent().addClass('open');
}
return false;
}
});
//Remove scroll-to-top
$('#scrolltotop').remove();
}
//Twitter
$(".tweetwidget").bind('loaded', function(e){
//Add the paging now that it has loaded
$(this).addClass('flexslider').flexslider({
animation:'slide',
slideshow:false,
start:function(slider){
$(slider.slides[slider.animatingTo]).css('width', $(slider.container).parent().width());
$(slider.container).height($(slider.slides[slider.animatingTo]).height());
},
before:function(slider){
$(slider.container).animate({ height: $(slider.slides[slider.animatingTo]).height()}, 200);
},
nextText:'›',
prevText:'‹'
});
}).each(function(){
$(this).tweet({
username: $(this).data('username'),
count: 10,
loading_text: "loading tweets...",
template: "{text}{time}"
});
});
//Dropdown nav
$('#pageheader nav #dropdownNav').change(function(){
if($(this).val().length > 0) {
window.location = $(this).val();
}
});