For some reason I'm getting a top margin of about 10px above my header bar in Firefox, but not in Chrome. This doesn't effect the main body, just the fixed header bar. If I remove the position: fixed; then there is no gap, but then it is no longer fixed.
Gap marked in red:
body {
margin: 0px;
}
#topbar {
width: 100%;
height: 50px;
background-color: #F0F0F0;
margin: 0px;
padding: 0px;
position: fixed;
z-index: 10000;
}
#topbar .header {
display: inline-block;
font-size: 35;
color: darkgrey;
margin-top: 5px;
}
<body>
<div id="topbar">
<div class="header">
Header
</div>
<div class="nav_item">
<button class="nav_icon"></button>
<nav>
Home
Item 1
Item 2
Logout
</nav>
</div>
</div>
Add following css:
#topbar {
top: 0;
}
Related
I'm new to Bootstrap. Trying to implement a fixed footer to the page with a logo whose height > height of the footer. The footer with an image are fixed at the bottom, while the image sticks out of the footer.
Like this...
If I make the image a part of the footer it resizes to the height of the footer. How do I implement this? I have been stuck on this for a while now.
/***Footer***/
footer {
width: 100%;
z-index: 9;
background: #bff;
position: fixed;
bottom: 0px;
left: 0px;
height: 40px;
padding: 0 25px;
color: #808080;
}
.foot-lg {}
.foot-lg img {
width: 50px;
}
.footer-logo-copyright,
.foot-menu,
.foot-social {
overflow: hidden;
display: flex;
height: 40px;
}
/*** added on 04.Jun.21 to display GPTW logo sticking out of footer ***/
.foot-pop img {
overflow: visible;
max-height: 100%;
height: 100%;
width: auto;
}
/**********************************************************************/
.footer-logo-copyright *,
.foot-menu *,
.foot-social * {
align-self: center;
}
.footer-logo-copyright p {
padding: 0 10px;
font-size: 11px;
}
.foot-menu li {
float: left;
list-style: none;
border-right: 1px solid #808080;
}
.foot-menu li:last-child {
border-right: none;
}
.foot-menu li a {
display: block;
padding: 0px 15px;
text-decoration: none;
color: #808080;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}
.foot-menu li:hover a {
color: #f37e1f;
}
.foot-social li {
float: left;
margin-right: 10px;
}
.foot-social li:last-child {
margin-right: 0;
}
.foot-social li a img {
width: 13px;
filter: invert(.7);
opacity: 0.5;
}
.foot-social li:hover a img {
/* filter: invert(0); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-pd">
<div class="footer-logo-copyright">
<a href="" class="pull-left foot-lg">
<img src="img/logo-animation.gif" alt="footer-logo">
</a>
<p class="pull-left">is a registered trademark of XYZ Pty Ltd.</p>
<p class="pull-left">© 2021. all rights reserve to XYZ Pty Ltd.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul class="pull-right foot-menu">
<li>
Careers
</li>
<li>
Sitemap
</li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
<ul class="foot-pop pull right">
<li>
<a href="# ">
<img src="img/gptw21.jpg ">
</a>
</li>
</ul>
<ul class="foot-social pull-right ">
<li>
<a href="https://www.linkedin.com/company/sjs-enterprises-pvt.-ltd./?originalSubdomain=in " class=" ">
<img src="img/linked-in-logo-key.svg ">
</a>
</li>
</ul>
</div>
</div>
</footer>
Thanks
Keep the HTML structure you have now, that is with the logo as part of the footer so it is positioned and is sized in relation to the footer.
What you want is for the logo to be able to be set at the bottom of the footer (perhaps with some padding or a margin) but to have, say, twice the height, or the height of the footer plus a bit (it's not possible to tell exactly which from the question).
This boiled-down snippet assumes you want the logo to be the height of the footer plus a bit. If you want it to be twice the height of the footer, say, see the comment.
body {
width: 100vw;
height: 100vh;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
background-color: cyan;
}
footer .logo {
position: absolute;
right: 1vmin;
bottom: 1vmin;
height: calc(100% + 30px); /* CHANGE to be what you want - e.g. height: 200% for twice the footer height %/
width: auto;
}
<footer>
<img src="https://i.stack.imgur.com/csy1S.png" class="logo">
</div>
</footer>
In your img tag add following style :
img {
max-height: 100%;
height: 100%;
width: auto;
}
If you're wanting to have a fixed image appear in the corner of the page, over the footer, you can easily use fixed positioning to achieve the desired result.
All you would need to do is create a new div container and add the fixed positioning to that element. See the below implementation for more information.
<style>
.fixed-image {
position: fixed;
bottom: 0;
right: 0;
}
</style>
<div class="fixed-image">
<img src="https://dummyimage.com/120x170/000/fff" alt="Image">
</div>
Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Attached is a JsFiddle:
https://jsfiddle.net/aus_tin/0dsoqecz/2/
You can achieve this result if you make the footer relative positioned and image as absolute
position: absolute;
bottom: 0;
right: 20px; // Change it as per your requirement
html,
body {
height: 100%;
background-color: cadetblue;
margin: 0;
padding: 0;
}
div#wrapper {
height: 100%;
display: grid;
grid-template-rows: 100px auto 50px;
}
header {
background-color: purple;
}
footer {
position: relative;
background-color: lime;
}
footer>img {
position: absolute;
bottom: 0;
right: 20px;
}
<div id="wrapper">
<header>header</header>
<main>body</main>
<footer>
footer
<img src="https://picsum.photos/100" />
</footer>
</div>
I am creating bootstrap page we have four parts of page container.
Please find below of model screen,
<div id="fixedheader">
<header>
</header>
<div class="a">
</div>
</div>
<!--Fixed header End-->
<!--Search content part start-->
<div class="searchcontent">
</div>
<!--Search Content End-->
I want "fixed-header" part should be fixed part of my page. i added style below,
#fixedheader
{
position:fixed;
overflow: hidden;
left:0;
right:0;
}
Now "search content" part some of the content hide in fixed header part in normal view ,find below of my sample output screen
How to fix the issue.
Try
css:
body{
margin: 0;
padding: 0;
background: #80B196;
}
header{
height: 150px;
background: yellow;
}
h1{
margin: 0 auto;
padding: 50px 0 0 0;
width: 300px;
color: #333333;
}
ul{
margin: 0;
padding: 0 0 0 50px;
list-style-type: none;
background: pink;
}
ul li{
display: inline-block;
padding: 6px;
background: rgba(0,0,0,0.4);
vertical-align: top;
}
.wrapper{
height: 1000px;
}
p{
margin: 0 auto;
width: 60%;
}
.fixed-nav{
width: 100%;
position: fixed;
top: 0;
left: 0;
}
and HTML
<div>
<header>
<h1>Header</h1>
</header>
<nav id="main-nav">
<ul>
<li>div</li>
<li>class</li>
</ul>
</nav>
<span id="mine"></span>
<div class="wrapper">
</div>
Codepen Example
I have seen a lot of similar topics; however I do not seem to get the css code right.
Layout of my page: has a background image. Then I want to create a white page in the middle with different blocks () starting with navigation at the top, header,content.
Im not getting the navigation bar to display at the top of the page (without space between the top of the browser and the bar) there is a small gap in between). Furthermore I want my content to always fill the screen until 'just' above the lower part of the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li>Home</li>
<li>Education</li>
<li>Experience</li>
<li>More</li>
<li>Contact</li>
</ul>
</div>
<div class="header">
</div>
<div class="maincontent">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}
Easiest way in this case is to set:
.nav ul {
margin: 0;
}
I recommend you (highly) to use CSS RESET STYLE to avoid these problems.
Example: http://meyerweb.com/eric/tools/css/reset/
I have tried to make a site but when I create a nav its conflict with body. body .main css showing marigin top in nav menu. but I set this for body content
You can check here jsfiddle
Here is the css code
*{margin: 0;
padding: 0;}
nav .navigation {margin: 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%}
nav .navigation li{display: inline-block;
padding: 5px 10px;}
nav .navigation li a{text-decoration: none;
color: #e1e1e1;}
nav .navigation li a:hover{color: #EDEDED}
.main { margin-top: 30px; }
.slide{background-attachment: fixed;
width: 100%;
height: 100%;
position: relative;
padding: 30px;
}
Here is the html code
<nav>
<ul class="navigation">
<li data-slide='1'>slide1</li>
<li data-slide='2'>slide2</li>
<li data-slide='3'>slide3</li>
<li data-slide='4'>slide4</li>
</ul>
</nav>
<div class="main">
<div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>welcome</h1>
</div>
</div>
</div>
</div>
</div>
It's because of the 'position: fixed' on the navbar. Change that margin-top: 30px to padding-top: 30px;
Generally when using position: fixed, you should specify the position instead of leaving it up to the browser to figure out where to place the element. It's quite unlikely that you'll want the browsers default position when using position: fixed, as you're forcing it to come out of the flow anyway.
For example, on your nav .navigation selector, add something like top: 0.
nav .navigation {
top: 0;
margin: 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%
}
Just replace the code :
nav .navigation {margin : 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%;
top:0;
}
I have update your js fiddle : **http://jsfiddle.net/JLjT2/6/.** Please check
it because u set the position:fix in ( nav .navigation)
delete fix property, and if you want nev's position fix, then add top:0px; in same class
see here
nav .navigation
{
margin: 0;
padding: 0;
position: fixed;
background: #333;
z-index: 999;
width: 100%;
top:0px;}
I have a navigation menu splited by the logo:
<div id="header">
<div id="header-container">
<div class="left-nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Awards</li>
</ul>
</div>
<div class="logo">
<h1>Magdi Designs</h1>
</div>
<div class="right-nav">
<ul>
<li>Testimonials</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS
#header {
height: 60px;
margin-top: 30px;
}
#header-container {
width: 80%;
margin: auto;
position: relative;
}
#header li {
display: inline;
line-height: 60px;
}
#header .left-nav {
position: absolute;
top: 0;
left: 0;
}
#header h1 {
background: url(logo.png) no-repeat;
width: 284px;
height: 30px;
margin-top: 15px;
text-align: center;
margin: auto;
}
#header .right-nav {
position: absolute;
top: 0;
right: 0;
}
The <h1> logo tag doesn't seem to apply the margin top.
Sorry if I'm putting too much irrelevant code, but I'm not sure what's causing the problem.
I've also tried padding but still doesn't work.
jsFiddle Demo
Secondary question:
Is this a good way to do the split menu?
Try:
#header h1 {
margin: 15px auto 0;
}
instead of:
#header h1 {
margin-top: 15px;
margin: auto;
}
You're setting margin: auto after margin-top: 15px which is removing the desired margin. The margin: auto isn't needed anyway.