How to make SharePoint Top navigation menu responsive in 2013 & 2016

Step1 :

Welcome to Designer dairy, Here we are going to discuss how to make SharePoint
Top navigation menu as responsive in 2013 & 2016 without installing 

"SharePoint Responsive UI Package"

Step 2:

There are some existing projects built in SharePoint 2013. where the client wish to make it portal responsive.As of now, Here we are not going to discuss about entire portal responsiveness only top navigation menu.

Step 3:

Search for “DeltaTopNavigation” in settle.master and select whole tag > Copy the code and place in between bootstrap navigation tags like below

Step 2-

Place these css in you css file-

/*************************************************************************/

.static,.dynamic {

    padding-left: 10px;

    padding-right: 10px;

}

.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item

{                margin-right:0px!important;

}

ul.dynamic li:hover {

    background-color: red;

}

.static.menu-item.ms-core-listMenu-item.ms-displayInline.ms-navedit-linkNode:hover {

    background-color: red;

}

.ms-core-listMenu-horizontalBox li.static > a{

display: none !important;

}

.ms-core-listMenu-horizontalBox li.static > ul a{

display: block !important;

}

@media screen and (max-width:767px) {

.ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table

{

               

                display:block;

}

.hideonsmall

{

                display:none;

}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {

    background-color: transparent!important;

}

.navbar-inverse .navbar-toggle {

    border-color: transparent!important;

}

.navbar-nav {

    margin: 7.5px -15px;

    padding-left: 15px!important;

    line-height: 25px!important;

}

.ms-core-listMenu-horizontalBox {

    color: #666666;

    display: inline-block;

    vertical-align: middle;

    line-height: 30px;

    height: auto;

}.ms-core-listMenu-horizontalBox {

                width:100%;

}.static, .dynamic {

    padding-left: 0px!important;

    padding-right: 0px!important;

}.menu-item-text {

    padding-left: 10px;

}

.navbar-collapse  {

                padding-left: 0px!important;

}

ul.dynamic

{

                left:25%!important;

}

}

Step4:

The final output of the screen will be like below screen.

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on SharePoint.