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;
}
}
very nice article
ReplyDelete