Thursday 29 June 2017

Sharepoint 2013: Responsive Top Navigation menu using bootstrap

           1 comment   
Sharepoint 2013: Responsive Top Navigation menu using bootstrap
There are many things we can do in sharepoint but for responsivnes we faild in sharepoint.
I tried to make sharepoint top navigation menu responive, Please follow steps which I have done and you will get same screen like below picture-


Step 1-
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;
}
}

1 comment: