Text going over navbar

Question

I have a vertical navbar which serves as a menu in my asp.net MVC5 project. In a css stylesheet I defined it's position:fixed; to be able to see it all the time. On the other part of my web page I have a partial view that changes according to menu selection. My problem is that when the partial view is too large, when I horizontally scroll to see what's missing, the text overlaps with the navbar.

Here is a sample from my navbar in a file called _Menu.cshtml:


    
        
            
            Sidebar menu
        
        
            
                
                    
                         Documentation 
                    
                    
                        
                            Documentation 1.1
                            Documentation 1.2
                            Documentation 1.3

In the _Layout.cshtml, I have the following inside of tag :


     
         
               @Html.Partial("~/Views/PartialViews/_Menu.cshtml")
         
         
               @RenderBody()

Finally the css:

.sidebar-nav{
     position: fixed; //Center works but then my navbar is not fixed anymore!
}

I use bootstrap to separate both parts of my page, hence having the menu on the left, and the body (or partial views of menu links) on the right. I know that making the navbar position different will solve the problem. But I'd like to have a fixed navbar, that would not be fixed horizontally OR have the text on the right part of my page go behind the navbar. Any ideas on how to do this?

Here's what it looks like (note the IpAdress doesn't show, so page isn't filled really, and please admire my drawing skills :p)

Kanstantsin Arlouski · Accepted Answer

You might want to try using a z-index, or use a filler div, that will act as a spacer at the top between your content and your menu. Example below.

.sidebar-nav{
     position: fixed; //Center works but then my navbar is not fixed anymore!
     width: 100%;
     z-index: 1;
}
#filler {
  display: block;
  height: 50px;
}



    
        
            
            Sidebar menu
        
        
            
                
                    
                         Documentation 
                    
                    
                        
                            Documentation 1.1
                            Documentation 1.2
                            Documentation 1.3
                        
                    
                
            
        
    


     
         
         
               
               Bunchotext
         
         
               
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae semper tortor, non efficitur nulla. Pellentesque elementum augue arcu, quis fermentum elit vestibulum eu. Curabitur ornare volutpat turpis, vitae pellentesque ex commodo lacinia. Sed venenatis dui nisi, sed feugiat dui hendrerit a. Nullam rutrum libero at mauris pellentesque bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum volutpat efficitur arcu, nec eleifend ante consectetur vitae.

In hac habitasse platea dictumst. Ut ornare, nisl non pharetra ultricies, arcu sapien porttitor ligula, vitae pellentesque diam tellus vitae urna. Sed eget tempus orci, sit amet egestas nisl. Nam sed aliquet ex, vel consequat magna. Aliquam enim diam, sollicitudin ut metus ut, accumsan dictum nunc. Phasellus dictum ultrices leo, tempus elementum nisl commodo eu. Ut efficitur turpis id dui accumsan lobortis. Fusce semper venenatis orci in dapibus. Ut id dolor et diam sagittis mollis. Nam vulputate tincidunt enim, vel facilisis leo ultricies eget. Mauris accumsan at diam id imperdiet. Integer gravida, nisi eget accumsan consectetur, purus quam suscipit est, maximus ullamcorper lectus lorem non velit. In interdum nec lectus et luctus. Donec congue malesuada tellus, vel auctor magna egestas non.

Nulla hendrerit, velit a euismod blandit, enim ex ultricies elit, ac aliquam massa tortor vitae erat. Mauris rutrum hendrerit nisl vel finibus. Sed aliquam eget arcu eget egestas. Nullam a auctor ante. Donec a nibh fringilla, ornare nibh ac, posuere felis. Pellentesque condimentum suscipit vestibulum. Fusce quis sapien non ex mattis ultricies et sit amet metus. Phasellus at nunc sollicitudin, tristique nunc eget, sodales augue. Praesent sagittis justo eget placerat feugiat.

Fusce aliquet enim eget venenatis fringilla. Suspendisse imperdiet, tellus eu pretium fringilla, ligula ante fermentum dui, in venenatis erat risus nec erat. Curabitur libero dolor, semper eu eros sit amet, eleifend accumsan diam. Fusce dui ante, pellentesque vitae nisl at, dapibus consectetur arcu. Mauris rhoncus nisl nec leo sollicitudin, eu fermentum nisi sodales. Quisque magna dolor, consequat sed ultricies dignissim, ullamcorper eu dui. Fusce vitae est sed augue ornare finibus. Aenean a eleifend ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dapibus malesuada nulla ac dignissim. Nulla scelerisque diam vel neque consequat, tempus facilisis eros tempor. Ut pellentesque urna vitae tellus imperdiet, a sagittis ipsum condimentum. Nullam in purus ut nisl porttitor porttitor nec eget metus. Sed maximus nisl arcu. Suspendisse ut egestas ipsum, ut varius nisi.

Nulla lacus neque, suscipit quis odio ac, accumsan molestie nisi. Vestibulum quam quam, bibendum non velit eu, faucibus laoreet sem. Aliquam auctor rhoncus ultrices. Nullam a sem sagittis, accumsan risus eu, auctor nisl. Nam vestibulum lobortis sagittis. Nunc vel ultricies sem, et convallis nulla. Mauris elementum imperdiet lorem, non maximus enim. Suspendisse dictum turpis massa, at bibendum neque ultrices ac. Sed sodales tempor augue et molestie.

Text going over navbar

Answers (1)

Related Questions