how can i replace some of the text with dot when i re-size the browser window

[bangash]

<nav class="navbar navbar-default">
 <div class="container">
  <ul class="nav navbar-nav">
<li><a href="#"> home</a></li>
<li><a href="#"> products catogeries</a></li>
<li><a href="#"> services catogeries</a></li>
<li><a href="#"> for kids</a></li>
<li><a href="#"> womens</a></li>
<li><a href="#"> men</a></li>
<li><a href="#"> home influences</a></li>
<li><a href="#"> sports and weare</a></li>
<li><a href="#"> etc</a></li> 

</ul>

</div>
</div>

[devcake]

Hello,

You can use jQuery .resize() event.
The resize event is sent to the window element when the size of the browser window changes:

$(window).resize(function() {
  $(".navbar-nav li:nth-of-type(2) a").text(".");
});