Divs are being obstructed by the navigation bar

Question

Divs are being obstructed by the navigation bar

I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping from other code or divs when the browser window is made smaller.

Alternatively, I would appreciate guidance on how to reduce the height of the "information bar" when the browser window is resized while allowing the divs to move underneath it smoothly.

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href=o>
    <link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Amaranth|Arapey|Armata|Asap+Condensed|Bellefair|Cabin+Condensed|Cormorant+Unicase|Cormorant+Upright|Dancing+Script|EB+Garamond|Economica|Frank+Ruhl+Libre|Great+Vibes|Gruppo|Gudea|Halant|Heebo|Hind+Guntur|IM+Fell+Great+Primer+SC|Italianno|Karla|Kreon|Kristi|Kurale|Molengo|Old+Standard+TT|Open+Sans+Condensed:300|Ovo|Parisienne|Pinyon+Script|Poiret+One|Pontano+Sans|Prata|Quattrocento|Rouge+Script|Share|Spectral|Tangerine|Tenali+Ramakrishna|Trirong|Voces|Yantramanav|Yrsa" rel="stylesheet">
    <title></title>
</head>

<body>
    <h1>Site</h1>
        <nav>
    <ul class="menu">
        <li>Information</li>
        <li>Wanting</li>
        <li>To</li>
        <li>Stay</li>
        <li>Undisruptive</li>
        <li>To</li>
        <li>Div's</li>
    </ul>
        </nav>

<div>
    <div class=red>
    </div>
    <div class=red>
    </div>
    <div class=red>
    </div>
    </div>
</body>
</html>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    text-align:center;
    font-family
}

h1{
    background-color:black;
    color:white;
    padding:1em;
    font-size:2em;
}

.menu{
    background-color:gray;
    width:200px;
    height:1200px;
    position:relative;
    float:left;

}

.red{
    position:relative;
    border:1px solid red;
    float:left;
    width:350px;
    height:350px;
}

@media screen and (min-width:600px){
    .red{

    }
}

html css

Answer 1

Answer №1

Here is a helpful tip:

If you want to adjust the width of an element, you can use "%" as the unit.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  font-family
}

h1 {
  background-color: black;
  color: white;
  padding: 1em;
  font-size: 2em;
}

.menu {
  background-color: gray;
  width: 25%;
  height: 1200px;
  position: relative;
  float: left;
}

.right {
  float: left;
  width: 75%;
}

.red {
  position: relative;
  border: 1px solid red;
  float: left;
  width: 100%;
  height: 350px;
}

@media (max-width:600px) {
.menu {
  width: 35%;
}
.right {
  width: 65%;
}
}

<h1>Site</h1>
<nav>
  <ul class="menu">
    <li>Information</li>
    <li>Wanting</li>
    <li>To</li>
    <li>Stay</li>
    <li>Undisruptive</li>
    <li>To</li>
    <li>Div's</li>
  </ul>
</nav>

<div class="right">
  <div class=red>
  </div>
  <div class=red>
  </div>
  <div class=red>
  </div>
</div>

Answer 2

Here is a helpful tip:

If you want to adjust the width of an element, you can use "%" as the unit.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  font-family
}

h1 {
  background-color: black;
  color: white;
  padding: 1em;
  font-size: 2em;
}

.menu {
  background-color: gray;
  width: 25%;
  height: 1200px;
  position: relative;
  float: left;
}

.right {
  float: left;
  width: 75%;
}

.red {
  position: relative;
  border: 1px solid red;
  float: left;
  width: 100%;
  height: 350px;
}

@media (max-width:600px) {
.menu {
  width: 35%;
}
.right {
  width: 65%;
}
}

<h1>Site</h1>
<nav>
  <ul class="menu">
    <li>Information</li>
    <li>Wanting</li>
    <li>To</li>
    <li>Stay</li>
    <li>Undisruptive</li>
    <li>To</li>
    <li>Div's</li>
  </ul>
</nav>

<div class="right">
  <div class=red>
  </div>
  <div class=red>
  </div>
  <div class=red>
  </div>
</div>

Answer 3

Answer №2

The code provided seems to be at a beginner level, but I have made some modifications to meet the requirements.

<div class="site-name">
  <h1>Site</h1>
  <div class="hamburger" id="hamClick">
   <span></span>
   <span></span>
   <span></span>
  </div>
</div>
<nav>
  <ul class="menu" id="menu">
    <li>Information</li>
    <li>Wanting</li>
    <li>To</li>
    <li>Stay</li>
    <li>Undisruptive</li>
    <li>To</li>
    <li>Div's</li>
  </ul>
</nav>

<div>
 <div class=red></div>
 <div class=red></div>
 <div class=red></div>
</div>

Custom CSS:

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  text-align:center;
}

.site-name {
  padding: 1em;
  position: relative;
  background-color:black;
}
.site-name h1{
  color:white;
  font-size:2em;
}

.menu{
  background-color:gray;
  width:200px;
  height:1200px;
  position:relative;
  float:left;
}

.red{
  position:relative;
  border:1px solid red;
  float:left;
  width:350px;
  height:350px;
}
.hamburger {
  display: none;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 4px;
  top: 20px;
  cursor: pointer;
}
.hamburger span {
  width: 20px;
  height: 2px;
  background: #fff;
  margin-top: 2px;
  display: block;
}
.hamburger span:first-child {
  margin-top: 0px;
}

@media only screen and (max-width:600px){
  .hamburger {
    display: block;
  }
  .menu {
    height: 0px;
    transition: all .3s ease-in-out;
    position: absolute;
    overflow: hidden;
  }
  .menu.active {
    height: 150px;
    transition: all .3s ease-in-out;
    z-index: 999;
  }
  .red {
    width: 100%;
  }
}

Javascript Functionality:

document.getElementById('hamClick').addEventListener('click', function() {
  var collapse = document.getElementById('menu');
  collapse.classList.toggle('active');
});

You can view the updated code on JSFiddle here: JSFiddle

Answer 4

The code provided seems to be at a beginner level, but I have made some modifications to meet the requirements.

<div class="site-name">
  <h1>Site</h1>
  <div class="hamburger" id="hamClick">
   <span></span>
   <span></span>
   <span></span>
  </div>
</div>
<nav>
  <ul class="menu" id="menu">
    <li>Information</li>
    <li>Wanting</li>
    <li>To</li>
    <li>Stay</li>
    <li>Undisruptive</li>
    <li>To</li>
    <li>Div's</li>
  </ul>
</nav>

<div>
 <div class=red></div>
 <div class=red></div>
 <div class=red></div>
</div>

Custom CSS:

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  text-align:center;
}

.site-name {
  padding: 1em;
  position: relative;
  background-color:black;
}
.site-name h1{
  color:white;
  font-size:2em;
}

.menu{
  background-color:gray;
  width:200px;
  height:1200px;
  position:relative;
  float:left;
}

.red{
  position:relative;
  border:1px solid red;
  float:left;
  width:350px;
  height:350px;
}
.hamburger {
  display: none;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 4px;
  top: 20px;
  cursor: pointer;
}
.hamburger span {
  width: 20px;
  height: 2px;
  background: #fff;
  margin-top: 2px;
  display: block;
}
.hamburger span:first-child {
  margin-top: 0px;
}

@media only screen and (max-width:600px){
  .hamburger {
    display: block;
  }
  .menu {
    height: 0px;
    transition: all .3s ease-in-out;
    position: absolute;
    overflow: hidden;
  }
  .menu.active {
    height: 150px;
    transition: all .3s ease-in-out;
    z-index: 999;
  }
  .red {
    width: 100%;
  }
}

Javascript Functionality:

document.getElementById('hamClick').addEventListener('click', function() {
  var collapse = document.getElementById('menu');
  collapse.classList.toggle('active');
});

You can view the updated code on JSFiddle here: JSFiddle

Divs are being obstructed by the navigation bar

Answer №1

Answer №2

Similar questions

Guide to creating a versatile navigation bar using Bootstrap and HTML

Personalized Owl Carousel - OWL.JS Hover Pause Feature

Transforming a Multi-Dimensional Array into an HTML Table

The video header on my webpage refuses to start playing upon loading

Transferring data from a table to another window

Loading HTML content in Electron using the renderer process JS

The background image fails to display properly on the server in Next.js

Guide for adding an OnClick event to a MatTable row:

Implementing checkboxes for each API data in JavaScript

Using JQuery to Customize Navigation Menu Targeting

javascript: obtain the height of the pseudo :before element

Exploring the depths of Cordova's capabilities: implementing a striking 3D front-to-back screen flip effect

Move the location of the mouse click to a different spot

Is there a way to trigger validation with a disabled property?

Tips for aligning numbers in a monospaced ordered list

Code snippet in webpage body

Upon selecting the hamburger menu, the menu pops up; however, the homepage text is visible overlapping the menu

Uploading an image using ajax with multer

Increase the thickness of the scrollbar track over the scrollbar thumb

Struggling with CSS on your website and need some help?