replace element A with SPAN on screens < 400px

by hannes

HTML

<div id="main-menu">
<ul>
<li><a href="http://piirissaareturism.ee/avasta-piirissaar/">Piirissaar</a>
<ul class="dropdown-menu">
	<li><a rel="bookmark" href="http://piirissaareturism.ee/avasta-piirissaar/welcome-to-your-site">Welcome to Your Site!</a></li>
	<li><a rel="bookmark" href="http://piirissaareturism.ee/avasta-piirissaar/welcome-to-your-site">Welcome!</a></li>
</ul></li>
<li><a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
<ul class="dropdown-menu">
	<li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/toitlustus">Toitlustus</a></li>
<li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/majutus">Majutus</a></li>
</ul></li>
<li><a href="http://piirissaareturism.ee/puhkajale/">Puhkajale</a></li>
<li><a href="http://piirissaareturism.ee/meist/">Meist</a></li>
</ul>
</div>

CSS

#main-menu {
margin: 0;
padding:0;
text-align:center;
height:50px;
display: table;
}

#main-menu ul{
background-color:#fff;
list-style-type: none;
margin: 0 ;
padding:0;
font-family:arial;
text-align:center;
line-height:3.8em;
font-size: 0.9em;
text-transform:uppercase;
display: table-cell;
vertical-align:middle;
}

#main-menu li{
background: none;
padding:0 10px;
margin:0;
display:inline;
float:left;
position:relative;
}

#main-menu li a {
margin:0 ;
padding:0;
font-weight:400;
color:#111;
text-decoration:none;
}

#main-menu ul ul{
list-style-type: none;
margin: 0;
padding:0 ;
text-align:left;
line-height:1.7em;
font-size:90%;
left:0;
position:absolute;
z-index:610;
display: none;
}

#main-menu ul ul li{
margin:0;
padding: 0;
display:block;
float:none;
position:relative;
}

#main-menu ul ul li a {
background-color:#fff;
margin:0 0 1px;
padding:7px 14px;
text-align:left;
color:#111;
border-bottom:0px solid #ddd;
width:100%;
width:225px;
display:block;
}

#main-menu ul ul li a:hover {
background-color:#eee;
text-decoration:none;
opacity:1;
}

JavaScript

if($(window).width() <= 400){
     $('#main-menu ul li:has(.dropdown-menu) > a').replaceWith(function() {
return '<span>' + $(this).text() + '</span>'
 });
}

$('#main-menu ul li:has(.dropdown-menu)').addClass('sub').on('click', function (event) {
    if ($(event.target).parents('ul.dropdown-menu').length > 0) {
        event.stopPropagation();
    } else {
        event.preventDefault();
    }
    $(this).find('ul').slideToggle();
});