Striving to create a responsive fixed sidebar using HTML and CSS

My HTML page has a left side vertical navbar with a fixed position, so it stays in place when I scroll down the other div containing a guide with text. I'm facing issues with making it responsive due to its fixed position. Is there a workaround for this? Below is an example similar to my situation, where the navbar hides the guide div as the screen size decreases.

.sidenav {
  height: 100%;
  width: 260px;
  position: fixed;
  z-index: 1;
  top: 140px;
  left: 135px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  border-radius: 5px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #2b8bc6;
  display: block;
}
.sidenav h3 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: black;
  display: block;
}


.box22 {
    background-color: #fff;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    border-radius: 8px;
}
<body>

<div class="sidenav">

      <a href="#clients">HTML 1 editors</a>
      <a href="#clients">HTML 2 editors</a>
      <a href="#contact">HTML 3 editors</a>

    </div>

 <div class="box22">

          <h1>HTML part 1 intro</h1>
        <p>text</p>
     </div>



</body>

css

Answer №1

Consider using a relative CSS unit like vw, which corresponds to 1% of the total viewport width.

Currently, the size is defined as an absolute value of 260px. Try changing it to something like 10vw.

To learn more about CSS units and view a list of relative units, you can visit this W3 page.

.sidenav {
  height: 100%;
  width: 10vw;
  position: fixed;
  z-index: 1;
  top: 140px;
  left: -6px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  border-radius: 5px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #2b8bc6;
  display: block;
}
.sidenav h3 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: black;
  display: block;
}


.box22 {
    background-color: #fff;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    margin-left: 11vw;
    border-radius: 8px;
}
<body>

<div class="sidenav">

      <a href="#clients">HTML 1 editors</a>
      <a href="#clients">HTML 2 editors</a>
      <a href="#contact">HTML 3 editors</a>

    </div>

 <div class="box22">

          <h1>HTML part 1 intro</h1>
        <p>text</p>
     </div>

</body>

Answer №2

Could you work on enhancing the navigation layout for smaller responsive designs using jQuery and a more traditional approach? Check out this idea: (fiddle: https://jsfiddle.net/moqb29cr/)

HTML:

HTML 1 editors HTML 2 editors HTML 3 editors 

      <h1>Introduction to HTML Part 1</h1>
<div id="responsive_nav">
        &#x2630;
      </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu maximus turpis. Cras non leo et felis consectetur tristique. Fusce rutrum erat non facilisis suscipit. Quisque id mi dictum, vestibulum massa sit amet, pharetra justo. Sed rutrum, ligula iaculis mattis sagittis, nisi urna commodo diam, eu auctor mi nunc eu odio. Quisque vel odio viverra, imperdiet augue at, rhoncus orci. Nullam fringilla id tortor vel rutrum. Morbi interdum egestas luctus. Suspendisse nec lacus lacinia, mollis massa auctor, consectetur nisi. Quisque interdum iaculis turpis vitae posuere. Aenean sollicitudin blandit interdum. Nulla vel bibendum nibh, at semper ex.Sed ornare dolor dui, sit amet efficitur lacus varius eget. Nunc ut urna at risus tristique cursus. Nulla rutrum rhoncus odio, vel volutpat nibh hendrerit sed. Nulla tempus id erat nec dictum. Phasellus laoreet pretium posuere. Etiam...

<p>jQuery:</p>

<pre><code> $("#responsive_nav").click(function(){
    $(".sidenav").toggle();
});

CSS:

    p {
  position:relative;
  display:block;
  width:75%;
  left:28%;

}
.sidenav {
  height: 100%;
  width: 25%;
  position: fixed;
  z-index: 1;
  top: 85px;
  left;0px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
  border-radius: 5px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: #2b8bc6;
  display: block;
}
.sidenav h3 {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 22px;
  color: black;
  display: block;
}


.box22 {
    background-color: #fff;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    border-radius: 8px;
}
#responsive_nav {
    display:none;
  }
@media only screen and (max-width: 600px) {
  .sidenav {
    display:none;
    }
  #responsive_nav {
    display:block;
    position:fixed;
    top:15px;
    left:80%;
    cursor:pointer;
    border-radius:6px;
    border:thin solid #ccc;
    padding:10px;
  }
  #responsive_nav:hover {
    background-color:#ccc;
    border-radius:6px;
    padding:10px;
  }
  p {
    width:90%;
    left:0%;
  }
  }

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

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...

htmlcssnext.jsflexboxtailwind-css

Overlaying images with cropped elements

When uploading an image on a webpage, I want to display a preview of the image. I am looking to create an overlay that showcases the image in a rectangle at the center, surrounded by a semi-transparent background outside the rectangle. Something resemblin ...

javascriptcss

What is the best way to adjust the height of the border on the left

Is it possible to add a border-left with height to only one attribute, such as h4? I want to add a border on the left side with a specific height, but the title prohibits adding the height property directly. Can anyone offer guidance on how to achieve th ...

htmlcss

What is the best way to make a div span the entire height of the body?

I have a menu that I want to wrap inside a yellow div. The yellow div should take up the entire height of the green square, regardless of the content size in the green square. For example, if the orange square expands, the yellow div should also expand. h ...

htmlcss

Enhancing your CircularProgressBar with dual variant colors using Material-UI

https://i.sstatic.net/0d35R.png Best practices for customizing MUI components with React ...

htmlcssreactjsmaterial-uiweb-frontend

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click

What is the best way to choose a specific div within a container that contains additional HTML elements?

I am facing an issue with selecting the second div tag within a section that contains 2 divs and an img tag. I attempted to use section div:nth-child(2), but it is targeting the second element inside the first div. However, my goal is to select the secon ...

htmlcss

New jQuery div elements do not have animations when using $(document).on

After creating an animation function that worked well with hovering over squares and leaving a trail, I later needed to add or remove squares based on the page size. Seeking help from here, I discovered my bind animation function wouldn't work on new ...

javascripthtmljquerycss

Can you explain the purpose of a <div> element that is empty except for the CSS property clear:both?

Can anyone shed light on the significance of this particular tag that I stumbled upon in a legitimate html document that I recently acquired? <div style="clear: both;">&nbsp;</div> I appreciate any assistance you can offer. ...

htmlcss

Tips for aligning a website logo and header vertically with the navbar

I'm having trouble aligning the navbar vertically with my website logo and header. I've tried using display: inline-block; and vertical-align: middle; on the , , and tags within the same div at the top of my website, but it ends up switching fro ...

htmlcsspositionbootstrap-4

Issues with Bootstrap's center-block functionality

I'm having trouble centering the navigation in my WordPress template that uses Bootstrap. I've tried using the center-block class on different elements, but the menu items are still aligning to the left. I even created a custom class in my custom ...

htmlcsswordpresstwitter-bootstrap

Adjust the height of the div element to match the screen height with AngularJS controller

Can someone please assist me in resolving this issue? I'm currently working on a div element that displays data (positioned on the left side of the screen). I want to add a scrollbar exclusively to this div. I managed to achieve this by using the fol ...

htmlcssangularjsscrollbar

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

function adjustPosition(currentDiv) { try { for (var i = 0; i < document.getElementById("parentContainer").childNodes.length; i++) { document.getElementById("parentContainer").childNodes[i].style.zIndex = 0; ...

javascripthtmlcss

What could be causing the empty space on the right side of my container?

Currently, I'm tackling a project using only HTML, CSS, and Bootstrap. Things were going smoothly until I stumbled upon an unexpected gap on the right side of my container. I'm puzzled as to why this is happening and how I can go about rectifying ...

htmlcssbootstrap-5

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

When CSS media queries are applied, the background color of Div does not fully extend to the edge

Although the problem seems simple, I am finding it difficult to find a solution. This page was created as part of my course. https://i.sstatic.net/DKCva.jpg While in developer mode and trying to resize the screen, I noticed that the background color of ...

javascripthtmlcssuser-interface

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

javascriptcssangularthree.js

Attempting to create a hexagon using 127 divisions results in a gap

I am faced with a challenge of arranging 127 divs to form a hexagon shape similar to the example below: for (i = 1; i <= 127; i++) { var div = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild( ...

css

multiple elements sharing identical CSS styling

For each component, I made separate CSS files and imported them accordingly. However, despite the individual styling efforts, all components seem to have the same appearance. I specifically worked on styling an image differently for two components, but w ...

javascripthtmlcssreactjsstyles