I have a question about placing two divs below the header and making it fixed. I am experiencing an issue where my divs are not visible because they are going inside the fixed element. Can someone offer some assistance on how to solve this problem without using margin-top, as it may not be suitable for multiple divs after the header?
var Deb = [];/* CSS code snippet */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>If you decide to utilize position: fixed, don't forget that you can also incorporate padding.
To determine the overall height of the header, ensure to include this total height in the padding-top property.
section#mainSection {
padding-top: 75px;
}
@media (max-width: 992px) {
section#mainSection {
padding-top: 141px;
}
}
Your content should be enclosed within the #mainSection element to prevent any complications.
var Deb = [];
$.noConflict();
jQuery(document).ready(function($) {
Deb.push(document.location);
});/*add*/
.nav>li>a:focus,
.nav>li>a:hover {
background: transparent!important;
}
body {
margin: 0;
padding: 0;
font: 400 14px/24px 'Open Sans', sans-serif;
}
#header {
float: left;
width: 100%;
position: relative;
}
.head-top {
float: left;
width: 100%;
position: fixed;
background: red;
z-index: 999;
}
#nav {
padding: 0;
margin: 16px 0 0 0;
list-style: none;
}
#nav li {
display: inline-block;
float: none;
position: relative;
padding: 0 0 20px 0;
}
#nav .active {
background: transparent;
}
#nav li a {
font: 400 14px/14px 'Lato', sans-serif;
color: #000;
text-transform: uppercase;
text-decoration: none;
padding: 0 20px;
display: block;
position: relative;
z-index: 20;
}
#nav li:hover>a {
background: none;
}
#nav li ul li a:hover,
#nav li ul li:hover>a {
text-decoration: none;
}
section#mainSection {
padding-top: 75px;
}
@media (max-width: 992px) {
section#mainSection {
padding-top: 141px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<header id="header">
<section class="head-top">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="left-side">
<h1>sandeep</h1>
</div>
</div>
<div class="col-md-6">
<div class="right-side">
<nav class="navbar ">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active"><a href="#" data-tab='main'>Home</a></li>
<li><a href="#aboutus" data-tab="aboutus">About</a></li>
<li><a href="#gallery" data-tab="gallery">Gallery </a></li>
<li><a href="#career" data-tab="career">Career</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</section>
</header>
<section id="mainSection">
<p>Hello</p>
</section>REMINDER: Check out and customize the code in CodeSandbox. This is a parent component with 5 children elements. Among them, 3 are React components and the remaining 2 are regular HTML buttons: import "./App.css"; import React from "react&qu ...
After using Selenium to scrape web data, I encountered an issue where it only displayed 96 out of 346 products instead of the expected 346. Does anyone have suggestions on how to fix this problem? The crawling code is placed right after the loop for clicki ...
Is it possible to include a window resize function in this code? jQuery(document).ready(function($){ var $MyDiv1 = $('#mydiv1'); if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { ...
Can someone help me? I am trying to display only the unique values of Barangay, specifically 'Talojongon', without any duplicates. Currently, my output looks like this: | Barangay | Disease | __________________________________ | Ta ...
After uploading an image file from my PC, I convert it to a data URL and then use the img element to preview it. Surprisingly, this process works perfectly fine in Firefox. However, when I try to do the same in Chrome or IE, the src attribute of the img el ...
Why aren't items showing up on my website? What mistake did I make, folks? Could someone assist me or guide me in resolving the problem within this section of code(index.js) import { client } from '../lib/client'; import {HeroBanner,FooterBa ...
I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...
So here's my concept: I envision a circle div positioned in the center with multiple small lines extending outwards, resembling rays of sunlight. How should I go about achieving this effect? Would implementing JavaScript or utilizing CSS3 animations b ...
I was experimenting with creating a simple transform transition animation using css and js, so I wrote the following code: (test page) <!DOCTYPE html> <html> <head> <style type="text/css"> *{ ...
On my webpage, I have integrated Google Maps. The layout is divided into a menu on the left and content on the right. I am looking to make the left side (menu) scrollable, while the right side (content, which includes the map) remains static without scrol ...
Whenever my video starts playing, the audio from my device (such as iPod or Spotify) stops. If I try to play the audio manually while the video is playing, the video freezes. Interestingly, when I tested playing an audio file directly within the app, it wo ...
<script type="text/javascript> window.print('page.php'); //Can you help me understand how to use window.print() function to print another php or html page? ...
I have an HTML page where I want to only display the search bar if the table object passed in is not empty. However, my check doesn't seem to be working correctly. Here's my code: <!-- We'll show the search bar only if the user has acces ...
Need help with CSS! I have two divs, one with a background color of #000 and the other with a transparent PNG image as the background. I want to override the background color with transparency from the PNG file so that the background doesn't cover th ...
I'm currently working on a Wordpress site, incorporating flexbox into my design. I have set up two columns where child 1 should occupy 75% of the page width and child 2 should take up 25%. However, I've noticed that when the content in child 1 is ...
When I try to trigger a dialog box by pressing the enter key, it is not working as expected. Instead of opening the dialog, it just hides the text. Can someone help me understand what might be causing this issue? <!doctype html> <html lang="en" ...
Below is the structure of my current table: <div class="container"> <div class="wrapper"> <table class="agenda"> <thead> <tr> <th> ...
http://jsfiddle.net/SVJaK/1338/ I attempted to create a small space between the green divs and my right div in this fiddle. I had to specify a very large pixel margin-left value to achieve that slight gap. Can someone explain why? Even though the gap is a ...
Currently, I am working on implementing user authentication using Angular Material. Specifically, I am focusing on displaying the appropriate error message when the confirmed password does not match the initially entered password. Below is the snippet of ...
I have a carousel/slider that is automatically moving, but I want to stop it so that it only moves when the navigation arrows are clicked. Here is a picture of the slider https://ibb.co/HPr9rJR. Currently, it is moving on its own to the left side, but I wo ...