1

Here I am trying to make top navigation as scroll-able navigation am almost done with that but when I have menus with child menus in top navigation then these are getting hide behind parent li this issue arises due to overflow:hidden(css property on parent li).

Here is my navigation looks a like


enter image description here

If I am removing the overflow:hidden from CSS then it is not remaining scroll-able further and these all menus are getting displayed like normal top navigation.

So here I want this overflow:hidden property and these child menus also getting displayed,so regarding this issue can any one help me?

code in master page

       <div id="content" class="defaults">
                    <SharePoint:AspMenu 
                        ID="TopNavigationMenu" 
                        Runat="server"
                        EnableViewState="false" 
                        DataSourceID="topSiteMap" 
                        AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;" 
                        UseSimpleRendering="true" 
                        UseSeparateCss="false" 
                        Orientation="Horizontal" 
                        StaticDisplayLevels="2" 
                        AdjustForShowStartingNode="true" 
                        MaximumDynamicDisplayLevels="2" 
                        SkipLinkText="" 
                    />                                

                    <div class="holder"></div>
                    <div id="btns">
                    <div class="prev"><div id="innerDivLeft">&#x3008;</div></div>
                    <div class="next"><div id="innerDivRight">&#x3009;</div></div>
                    </div>
              </div>


javscript code

<script type="text/javascript">
$( document ).ready(function() {    
    $("div.defaults ul").eq(1).attr("id", "thumbs");   
     $("li.static selected").append(container);
    $("div.defaults ul").eq(1).addClass("content");   
    $("ul#zz13_RootAspMenu li").eq(0).addClass("wrapper");    
    $("ul.content li").addClass("item");  
    $(".prev").click(function(){
         $(".wrapper").animate({scrollLeft: "-="+817});
    });
    $(".next").click(function(){
        $(".wrapper").animate({scrollLeft: "+="+817});
    });         
    });
</script>


CSS code

.wrapper
{
    width: 817px;
    background: rgb(205, 205, 245);
    overflow: hidden;
    margin-left: 104px;
    margin-right: 43px;
    height: 30px;
}

#innerDivLeft
{
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: black;
    margin-top: 6px;
    margin-left: 5px;
    line-height: 21px;
    text-align: left;
}

#innerDivRight
{
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: black;
    margin-top: 6px;
    margin-left: 5px;
    line-height: 20px;
    text-align: right;
}


.prev
{
    background: #0072c6;
    left: 74px;
    top: -33px;
    line-height: 28px;
    color: #FFF;
    text-align: center;
    font-weight: bolder;
}

.next
{
    right: -351px;
    top: -33px;
    background-color: #0072c6;
    line-height: 28px;
    color: #FFF;
    text-align: center;
    font-weight: bolder;
}


html code in browser when i will do inspect element

enter image description here

  • can you post you html and css code ? – Codec Aug 3 '16 at 5:06
  • actully i dont have html am doing this inf master page with the help of javascript and css – Madhav Aug 3 '16 at 5:09
  • so can you just put your navigation part from debugger and javascript and css you have used ? which will be helpful to solve your problem – Codec Aug 3 '16 at 5:14
  • posted code as well, there you can check – Madhav Aug 3 '16 at 5:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.