Text obstructed by a sticky sidebar in Bootstrap

Currently, I am utilizing bootstrap to create a webpage featuring an affixed sidebar. However, I have encountered two issues when adjusting the screen size to that of a phone:

  1. The sidebar obstructs the text behind it, halting its movement beneath the sidebar.
  2. On the right side of the sidebar, the rounded border corner does not display; instead, it extends all the way to the browser's edge.

How can I ensure that the text moves below the sidebar on smaller phone screens and how can I rectify the absence of the rounded corner border?

        <div class="row-fluid" style="margin-top:20px;">

            <div id="sub-nav" class="span3">
                <div class="span3 affix" data-spy="affix" data-offset-top="200">
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li class="nav-header">Test Sidebar</li>
                            <li><a href="#a">a</a></li>
                            <li><a href="#b">b</a></li>
                            <li><a href="#c">c</a></li>
                            <li><a href="#d">d</a></li>
                        </ul>
                    </div><!--/.well -->
                </div><!--/span-->
            </div>

            <div class="span9">
                <div class="page-header">
                    <h1>Test <small>test</small></h1>
                    <em>asdf</em> 
                </div>

                <div id="content">
                    <section id="a">
                    <h4>a</h4>
                    <div style="margin-bottom:500px;"></div>
                    </section>

                    <section id="b">
                    <h4 >b</h4>
                    <div style="margin-bottom:500px;"></div>                        
                    </section>

                    <section id="c">
                    <h4 >c</h4>
                    <div style="margin-bottom:500px;"></div>                        
                    </section>      

                    <section id="d">
                    <h4 >d</h4>
                    <div style="margin-bottom:500px;"></div>                        
                    </section>                      
                </div>

            </div><!--/span-->

        </div><!--/row-->

Answer №1

To improve the layout, consider placing the well element inside the sidebar-nav section..


       <div class="span3 affix" data-spy="affix" data-offset-top="200">
          <div class="sidebar-nav">
            <div class="well"> 
              <ul class="nav nav-list">
                <li class="nav-header">Test Sidebar</li>
                <li><a href="#a">a</a></li>
                <li><a href="#b">b</a></li>
                <li><a href="#c">c</a></li>
                <li><a href="#d">d</a></li>
              </ul>
            </div><!--/.well -->
          </div>
        </div><!--/span-->

Consider removing the sub-nav span3 and enclosing everything in a container-fluid

Check out this Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Detect the 'mousewheel' event on a container with a concealed overflow

Is there a way to capture the "mousewheel" event on a body with a hidden overflow? I attempted to follow the solution provided here, but unfortunately, it did not work in my situation. ...

What could be the reason behind Flex making several images decrease in size?

I'm trying to set up a carousel of images with Tailwind CSS, where 5 identically sized images are displayed next to each other and can be scrolled left and right. When I imported the images without using Flex, they fit the max-width that I had specifi ...

Activate only one option group at a time

<select name="location"> <optgroup label="West Coast"> <option value="1">Los Angeles</option> <option value="2">San Francisco</option> <option value="3">Seattle</option> &l ...

Having difficulty choosing a drop-down menu option with AJAX technology

My current project involves creating a page where the database is updated upon a drag-and-drop event. Specifically, I have implemented drag-and-drop functionality on a page, and whenever a div (deal-card) is dragged and dropped into another div (stage-colu ...

Expand the size of bootstrap-datepicker to fill the entire screen

I've implemented the plugin from https://github.com/uxsolutions/bootstrap-datepicker Check out the JSFiddle demo: https://jsfiddle.net/j3b089gr/ In my example, I have the calendar displayed along with the HTML code: <div class="row"> <di ...

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code: <a-gltf-model color="#FFFFFF" width="1" height="1" de ...

Having trouble with jQuery scrollTop not working after loading content with ajax?

When the html content is loaded via ajax, I need to scroll to a specific element. This element has the attribute data-event-id="". However, there are instances when the variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().t ...

Is there a way to switch an input's appearance to resemble that of a label?

Looking to customize my input fields to resemble labels at first, then apply editable styles with angular.js upon button click. Utilizing bootstrap for my project, wondering if there is a built-in class that can be toggled on and off for these inputs? ...

Troubleshooting jQuery Ajax with Cucumber, Capybara, and PhantomJS for Rails Development

I'm struggling to comprehend the issue at hand, so any assistance would be highly appreciated. My goal is to test a straightforward Ajax-based registration form on my project. When the form is successfully submitted, the user should be redirected to ...

Implement a JavaScript confirm dialog for a mailto hyperlink

Is there a way in javascript to automatically detect mailto links on the page and prompt a confirmation dialog when clicked by a user? I came across a method on this website for displaying an alert message. My knowledge of javascript is very basic. It&ap ...

What could be the reason behind the significant void in the grid I designed?

I'm currently learning how to utilize the grid container and have successfully created a grid with 2 images on top, 2 on the bottom, and one that stretches vertically on the left side. While I have arranged the grid as desired, I am facing an issue wi ...

Determine the dimensions of a div element in IE after adjusting its height to auto

I am currently working on a JavaScript function that modifies the size of certain content. In order to accomplish this, I need to obtain the height of a specific div element within my content structure. Below is an example of the HTML code I am dealing wit ...

Send information from a jQuery post to a PHP script and then have it appear instantly on the same PHP file

Looking for a solution to post data to a php script called showitemid.php using ajax and open the same script in a thickbox upon clicking a hyperlink? The goal is to display the posted data on showitemid.php. Check out my code below: postitemid.php In th ...

Is there a way to access data from a database using ajax and php?

I am attempting to verify if a field exists in the database before submitting a form. To achieve this, I have added the keyup event to the field to fetch data from the db using ajax. Below is the code snippet that I have added where the form is: $(docum ...

What's the reason for jQuery not triggering my Ajax error handler?

Here's the jQuery Ajax call I am working with (There are no other global settings/handlers): $.ajax( { url: "http://www.blah.com/url/does/not/exist", type: "get", data: someData, dataType: "json", error: function (xhr, msg, ex) { ...

Is it possible to achieve this using an alternate method such as CSS?

Currently, I am working on a function that will apply shadow effects to all buttons within a specific class when hovered over. However, due to the dynamic nature of the buttons created based on the data retrieved from the database, assigning individual IDs ...

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

Ways to eliminate extra spacing when search bar is expanded

My code is all contained within a header with the class 'example'. When the 'search' button is clicked, a div with the class 'search-bar' appears and its borders match those of the header. However, I want the search bar to ali ...

Issue with cursor behavior in contenteditable field on Chrome

Recently, I encountered an issue where the cursor would jump to the wrong place when a user clicked inside a contenteditable div, but not directly on the text. This problem seems to be isolated to newer versions of Chrome and Opera. Interestingly, when I t ...