I have a responsive website I am working on. When it switches to the mobile layout, the topbar scrolls down a bit before it sticks to the top of the screen where it should be, misaligning everything. This works fine on the desktop layout.
#topbar {
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
height: 15%;
box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
<html>
<head>
<link href='stylesheet.css' rel='stylesheet' />
<script defer src='main.js'></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
</head>
<body>
<section id='topbar'>
<nav>
<h1 id='logo'>Logo</h1>
<ul id='links'>
<li>
<a href='#home'>
<h1>Home</h1>
</a>
</li>
<li>
<a href='#about'>
<h1>About</h1>
</a>
</li>
<li>
<a href='#products'>
<h1>Products</h1>
</a>
</li>
<li>
<a href='#jobs'>
<h1>Jobs</h1>
</a>
</li>
</ul>
<div id='menu-button'>
<div id='line1'></div>
<div id='line2'></div>
<div></div>
</div>
</nav>
</section>
</body>
</html>
You might have to change the structure.
The reason for changing the structure is that you need to have the top header (Logo section) fixed on the top and your nav should start after that section.
If the Logo section takes the entire width, the nav section automatically stays below the logo section.
So, the changes I provided are:
Separate out the logo section and nav section in different divs and make them sibling so that nav section appears below the logo section.
Added top: 0 on the fixed logo section to keep it on top always.
Added margin-top of the height of the logo section to the nav section to make nav section visible .
<html>
<head>
<style>
#topbar {
top: 0;
font-weight: 300;
background-color: white;
z-index: 999;
position: fixed;
width: 100%;
margin-bottom: 49px;
height: 60px;
box-shadow: 0 5px 10px rgb(124 124 124 / 30%);
}
#links {
margin-top: 60px;
}
body {
margin: 0;
}
#media (min-width: 35em) {
#topbar {
height: 60px;
}
}
</style>
<script defer src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="topbar">
<h1 id="logo">Logo</h1>
</div>
<nav>
<ul id="links">
<li>
<h1>Home</h1>
</li>
<li>
<h1>About</h1>
</li>
<li>
<h1>Products</h1>
</li>
<li>
<h1>Jobs</h1>
</li>
</ul>
<div id="menu-button">
<div id="line1"></div>
<div id="line2"></div>
<div></div>
</div>
</nav>
</body>
</html>
I think that's because of not using
top
left properties
Whenever you use position property you must use these 2 properties
Added Those two properties to #Topbar
#topbar{
top: 0;
left: 0;
}
Related
There is a white space gap at the bottom of mine webs
Header and CSS#
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
This is mine header i using bootstrap and there got a white space in
the bottom of mine website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>We CARE for your health</title>
<link rel="icon" href="<?= base_url('img/icon.png')?>" type="image/icon type">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Online Clinic</title>
<link rel="stylesheet" href="<?= base_url('bootstrap/dist/css/bootstrap.min.css')?>">
<!--For home page's below slider's content-->
<!--For home page's below slider's content-->
<style>
/*The control button to black color*/
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
filter: invert(100%);
}
/*For home page's below slider's content*/
.how-section1{
margin-top:-15%;
padding: 10%;
}
.how-section1 h4{
color: #ffa500;
font-weight: bold;
font-size: 30px;
}
.how-section1 p{
text-align: justify;
text-justify: inter-word;
}
.how-section1 .subheading{
color: #3931af;
font-size: 20px;
}
.how-section1 .row
{
margin-top: 10%;
}
.how-img
{
text-align: center;
}
.how-img img{
width: 70%;
}
.lastImg img{
width: 80%;
}
/*For home page's below slider's content*/
.foot {
position: fixed;
bottom: 0;
width: 100%;
height: 70px; /* Height of the footer */
background: white;
}
</style>
# Body#
<body style="background-repeat: no-repeat; background-color:white;" class="d-flex flex-column min-vh-100">
<div class="m-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<img src="<?= base_url('img/logoClinic.jpg') ?>" height="70" alt="Mediklinik Menglembu 18 Jam" >
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ">
<b>Home</b>
<b>Profile</b>
<b>Messages</b>
<b>Reports</b>
</div>
<div class="navbar-nav ms-auto">
<b>Login</b>
</div>
</div>
</div>
</nav>
</div>
Footer#
<div class="foot">
<footer class="text-center text-black position-relative" style="background-color:white">
<div class="social">
<i class="icon ion-social-instagram px-5"></i>
<i class="icon ion-social-snapchat px-5"></i>
<i class="icon ion-social-twitter px-5"></i>
<i class="icon ion-social-facebook px-5"></i></div>
<br>
<ul class="list-inline">
<li class="list-inline-item px-3">Home</li>
<li class="list-inline-item px-3">Services</li>
<li class="list-inline-item px-3">About</li>
<li class="list-inline-item px-3">Terms</li>
<li class="list-inline-item px-3">Privacy Policy</li>
</ul>
<p class="copyright text-center">Mediklinik Kampar © 2022</p>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>
You can solve your problem like this way,
<body>
<main></main>
<footer>
<span>This is a footer</span>
</footer>
</body>
Step 1: Set your body min-height: 100vh; and position: relative;
Step 2: Set your footer width: 100%;, position: absolute; and bottom: 0;
Here is the css,
body {
margin: 0;
min-height: 100vh;
position: relative;
}
footer {
width: 100%;
background: lightgray;
text-align: center;
padding: 1rem 0;
position: absolute;
bottom: 0;
}
you can fix the issue by yourself by right clicking on the page and select Inspect option.
No matter what I do, when resizing the screen or going on mobile, everything overlaps each other and images size down when they aren't supposed to.
Here is what the navigation bar looks like when resized:
Here is how it is supposed to be:
I did find a potential solution with the text, but it isn't exactly the solution I want. Especially with position: relative, which, for me, is hard to deal with since, no matter where you move your divs, it still processes it as being where it originally was. That is why I usually work with absolutes. So, if there is an alternative solution for that, it would be greatly appreciated. :)
What I am having a problem with at the moment is the image. If I do position: relative it resizes it when you change the browser size. I figured out a way to make it stabilize when it is absolute, but it still overlaps with other media when the browser is resized.
I have tried #media, (which for some reason breaks the whole browser, makes something disappear, or doesn't work,) overflow: hidden/auto, margins, paddings, indexes, max-width, max-height, ect. I can't seem to find a solution, though.
Here is the html and css code.
.nav-bar-links a {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #fff;
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
color: 6s;
}
.nav-bar-links a:hover {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: rgb(253, 253, 159);
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
transition: color 0.6s;
}
.nav-logo img {
position: absolute;
max-width: 25%;
max-height: 20%;
z-index: 1;
float: left;
margin: 0x 20px 20px 20px;
padding: 0;
}
.nav-text-link a {
text-transform: uppercase;
text-decoration: none;
position: relative;
padding: 0px 20px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: bold;
font-size: 50px;
float: left;
z-index: 1;
top: 10px;
left: 12%;
color: 6s;
}
.nav-text-link a:hover {
color: rgb(253, 253, 159);
color: 6s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="nav-bar-wrapper">
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="nav-logo">
<img src="/image.png">
</div>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
Thank you!
You haven't told us what you want to achieve exactly, but first step is to remove everything that makes the image behave weirdly, notably negative margin, float and position. Try to avoid these things as much as possible.
If you want to put columns or elements next to each other, you should use flex declarations on the parent element, the div that wraps the elements you want to arrange. Note that I moved your container-fluid out so it wraps everything. Not good to nest multiple containers inside one another.
Let me know where we want to take this from here (see, no overlapping!):
* { box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav-logo img {
width: 100%;
margin-top: 2rem;
}
.nav-bar-wrapper {
padding: 1rem 2%;
display: flex;
align-items: center;
justify-content: space-between;
background: pink;
}
.nav-bar-links {
display: flex;
justify-content: space-between;
width: 60%;
}
.container-fluid {
max-width: 1400px;
}
.row {
margin: 0 4%; /* margin on each side of content */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="nav-bar-wrapper">
<div class="logo"><h1>LOGO</h1></div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="row">
<div class="column nav-logo">
<img src="https://wallpapercave.com/wp/ylvyN1V.jpg" alt="National park" title="National Park">
</div>
</div>
<div class="row">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="`nav-bar-wrapper`">
<div class="nav-logo">
<img src="/image.png">
</div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
add this css
.nav-bar-wrapper{
display:flex;
justfy-contant:space-between;
}
donot use any asolute positioning that is what is causing it to overlap
I'm trying to make a Google first page copy and i have a problem with the footer.
My copy footer look like this:
And i'm trying to achieve this:
That part with privacy, terms and settings, i want to make it stay in the same position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google</title>
<!-- font awesome -->
<script
src="https://kit.fontawesome.com/8370b7a799.js"
crossorigin="anonymous"
></script>
<!-- custom css -->
<link rel="stylesheet" href="styles.css" />
<!-- Bootstrap -->
</head>
<body>
<nav class="nav-bar">
Gmail
Images
<i class="fab fa-buromobelexperte fa-lg"></i>
S
</nav>
<main class="main-google">
<div class="content">
<div class="img-div">
<img src="google.png" />
</div>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" />
<i class="fas fa-microphone"></i>
</div>
<div class="search-buttons">
<button class="changed-button">Google Search</button>
<button class="changed-button">I'm Felling Lucky</button>
</div>
<div class="lang-div">
<span>Google offered in:</span>
Romana
magyar
Deutsch
</div>
</div>
</main>
<footer class="footer">
<div>
<p class="location">Romania</p>
</div>
<div class="footer-link-bar">
Advertising
Business
About
How Search works
<span class="footer-links-right">
Privacy
Terms
Settings
</span>
</div>
</footer>
</body>
</html>
is it better to move that span outside the footer?
CSS
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer div {
background: #f2f2f2;
border: 1px solid #e4e4e4;
line-height: 40px;
font-family: arial, sans-serif;
font-size: 15px;
}
.location {
color: rgba(0, 0, 0, 0.54);
padding-left: 25px;
}
.footer div a {
margin-left: 25px;
text-decoration: none;
color: #5f6368;
}
.footer div a:hover {
border-bottom: 1px solid #5f6368;
}
.footer-links-right {
right: 0;
position: fixed;
}
.footer span a {
margin-right: 27px;
margin-left: 0;
}
And for the text decoration, i've tried to modify text-decoration-thickness but it doesn't work so i've used border bottom, but is there another posibility for me to use tect-decoration?
for the footer add a fixed minimum width, not a percentage.
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
min-width: 750px; /* footer doesn't shrink less than 750px */
}
rather you should add it to the container of the whole page for your desired situation.
body {
width: 100vw; /* maintain width of 100 view width(users viewpoint)** */
min-width: 750px; /* body doesn't shrink less than 750px */
}
** Relative Lengths => https://www.w3schools.com/cssref/css_units.asp
the page looks very fine in normal view mode but the problem is that,
the image in the body tag disppears when the page becomes smaller.
I have tried to edit the code several times but it never worked.
<!DOCTYPE html5>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0 ">
<link type="text/css" rel="stylesheet" href="style.css" />
<title> home
</title>
<style>
.wrapper {
background-color: #66aaee;
position:relative;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 500%;}
<!--wrapper is the main div that contains all the content of the page -->
.header{
background-color: #66bbff;
width: 100%;
height: 21.5%;
margin-top: -8%;
position: fixed;
z-index: 2;}
<!-- navigation is a div inside the header and it contains all the menu -->
.navigation{
margin-left: 15%;
width: 500px;
float: none;}
.body {
background-color: black;
height: 95%;
margin-left: 10%;
margin-top:8%;
width: 80%;
}
.body img {margin-left: 10%;
margin-top: 7%;
width: inherit;
float: none;
overflow: hidden;}
.body_down {
height: 90%;
background-color:#44aacc;
font-size: 20px;
margin-top: 1%;
position: relative;
z-index: 1;}
<!--body_down is another div that contains some of the body content -->
.footer{
background-color:#ffffff;
font-size: 20px;
margin-top: 100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="navigation">
<img src="image/header.png" width="800px">
<nav>
<ul>
<li> Home </li>
<li> About </li>
<li> About Research Buddies </li>
<li> Products and services
<ul>
<li> GRAPHIC DESIGN </li>
<li> CITATIONS </li>
<li> PRINTING </a> </li>
<li> PUBLISHING </li>
<li> PHOTO EDITING </li>
</ul>
</li>
<li> Promotions </li>
<li> FAQs </li>
<li> Contact us </li>
</ul>
</nav>
</div>
</div>
<div class="body">
<img src="image/ww.jpg"/>
</div>
<div class="body_down">
body content continues here
</div>
<div class="footer">
the footer is here
</div>
</div>
</body>
</html>
the page looks very fine in normal view mode but the problem is that,
the image in the body tag disppears when the page becomes smaller.
I have tried to edit the code several times but it never worked.
You have to remove the width from img.
and use this css below.
img-resposive {
max-width:100%;
height:auto;
}
For some reason my footer is floating in the middle of the page. Driving my mad. I hope its just a quick fix. Ive looked online and all the answers seem to point to having a fixed footer and i dont want that as it displays horribly in smaller resolutions.
<!DOCTYPE html>
<html>
<head>
<title>MM Web Design</title>
<meta name="viewport" content="width=500, initial-scale=1">
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<img class="logo" src="img/logo.png">
<div class id="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
<br>
</div>
<div class="wrapper">
<h1>Welcome to my Portfolio</h1>
<p>
yada yada yada
</p>
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
<div class="footer-wrap">
<div class="footer">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.footer-wrap{
height:50px;
width:100%;
background:#333333;
margin: 0em;
}
.footer ul {
font-size: 18px;
font-weight: lighter;
list-style-type: none;
margin: 100px;
padding: 0;
text-decoration: none;
}
.footer ul li {
float: right;
display: block;
padding-left: 20px;
font-size: 0.75em;
}
Most likely, it's just displaying below the other divs.
Try sticky footer?
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
and css
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
The divs are behaving exactly as they should be? And they are correctly ordered.
As soon as you fill content into the preceding div the footer will move down
If you want it to stay at the bottom of the window then it needs to be sticky as has already been suggested.