I have a button inside the header menu , That header contains the logo & social media icons & that button.
I want to make that button fixed , So that when I scroll it's always at the top of the screen.
Let's say I have the following html code:
.menu{background:#ddd}
.logo,
.social-media,
.sticky-container{
display:inline-block;
width:30%
}
.logo{background:#000}
.social-media{background:#080}
.sticky-container{background:#333}
.logo,
.sticky-container{color:#fff}
<div class="main_container">
<div class="wrapper">
<div class="menu">
<div class="logo">Logo</div>
<div class="social-media">
<div class="facebook">Facebook</div>
<div class="youtube">Youtube</div>
<div class="twitter">Twitter</div>
</div>
<div class="sticky-container">
<a class="sticky-element">Button</a>
</div>
</div>
</div>
</div>
I want the button with class sticky-element that is inside sticky-container to be sticky.
Set position: fixed; for your sticky-container class.
Here's the jsfiddle: https://jsfiddle.net/30shhy3L/2/
Edit:
From comments, as you have mentioned your real site at https://logosperformance.com, just change the css of [data-css="tve-u-163a8211f58"] element as following:
[data-css="tve-u-163a8211f58"] {
float: right;
z-index: 3;
position: fixed;
margin-top: -2px !important;
margin-bottom: 0px !important;
}
Related
I have a menu icon which is displayed when window reaches certain size.
Everything is fine but the position of this icon. I don't know how to get this to the right side of the site - the most favourable would be to define the right property.
Here's what it look like now:
And I would like it to be really close to the right boundary of the window.
Here's the code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-offset-1">
<img src="images/logo.svg">
</div>
<div class="col-xs-offset-1">
<div class="iconcont">
<a href="javascript:void(0);" class="icon" onclick="header()" >
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
<div class="menu" id="mainmenu">
Home
News
Members
History
Projects
</div>
</div>
</div>
</div>
CSS:
/* HEADER */
.header {
background-image: url("images/stars.png");
width: 100%;
height: 150px;
}
header img {
height: 100%;
width: 100%;
}
/* MENU */
.menu {
background-color: transparent;
overflow: hidden;
}
.icon {
display: none;
}
#media screen and (max-width: 1370px) {
.menu a {
display: none;
}
.icon {
display: block;
}
}
.iconcont {
top: 55px;
position: relative;
}
I tried to wrap it in div (iconcont) but the right or left property doesn't work as I want. I guess it's because the whole menu is "col-xs-offset-1" (Flexbox Grid) but I don't know how to fix this and not ruin everything else.
EDIT:
For anyonewondering I fixed it. I put the icon in another div col-offset-5 but AFTER menu. I don't know why I hadn't done it in the first place.
Maybe add an ID to the class you want special treatment for and then make an exception with that?
HTML
<div class="col-xs-offset-1" id="header-layout">
<div class="iconcont">
<a href="javascript:void(0);" class="icon" onclick="header()" >
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
<div class="menu" id="mainmenu">
Home
News
Members
History
Projects
</div>
</div>
CSS
#media screen and (max-width: 1370px) {
#header-layout
{ display: flex;
align-items: flex-end;
}
}
Is there any way that I could position everything such that the items (such as text/pictures) can overlay?
For example:
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image</div>
<div class="class2">text</div>
<div class="class3">text</div>
</body>
I want the class 2 text and class 3 to be displayed over the image. However, in this format, they just appear below the image.
I tried putting the class 2 and class 3 inside of class 1
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</body>
However, I found this very troublesome. Everytime I add a new thing into class 1, the whole page will move.
Even though position: relative; and position: absolute; solves this it won't work if I try to display an element over the whole page itself (outside of class 1 - goes to the bottom of the page). I am trying to have something like this https://www.w3schools.com/howto/howto_js_alert.asp appear over my whole page.
Tried setting the with position: relative; and the alert message box as 'position: absolute;` but this didn't do anything. Could someone please give some suggestions? Thanks a lot!
I'm not sure to understand what you need but maybe your need is something like that :
.class1 {
position: relative;
background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
background-size: contain;
background-repeat: no-repeat; height: 100px;
width: 100px;
}
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">
<div class="class2">text2</div>
<div class="class3">text3</div>
</div>
</body>
Yeah , like this.
HTML
<div class="container">
<div class="class1">image</div> //use an img tag here
<div class="text-container">
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</div>
CSS
.container {
position: relative;
text-align: center;
color: white;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You need to set you content at bottom of the page the try the solution, it is for bottom right poistion
.class1{
position: absolute;
right: 0;
bottom: 0;
}
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
I have a fixed header with three tabs. On the rest of the page I have both text and images. I was able to have text scroll "under" the fixed header but the images overlap. I tried setting the background of the header as an image but that did not work. I also tried various z-index values but also lacked results. I'm posting the CSS with no z-index on the header because it doesn't affect the fixed header in terms of the overlap problem, but only shifts it off-center. Is there a way to fix this with CSS?
Thanks
HTML Code:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS code:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
You have to use a Bootstrap feature (navbar) as opposed making the div a fixed element at the top of the page.
I have a live website located here:
my website
The problem is the footer navigation bar does not position all the way at the bottom of the browser as shown here:
There is a bit of blue spacing, which is not what I want to achieve.
I'm using twitter bootstrap, if that helps, but the footer bar div object is called "navbar navbar-default"
If I named the footer div like so:
<div class="navbar navbar-default navbar-fixed">
then, the navbar sticks to the very bottom of the browser window, but it stays fixed, which is not what I want.
Currently, the code is like so:
<div class="navbar navbar-default navbar-fixed">
How can I achieve my goal?
Thanks
EDIT: I apologize guys, my website has the footer fixed, but if the code did not have the footer bar fixed, it will have the spacing. I apologize for the confusion.
I'm not familiar with Twitter Bootstrap, but the spacing is most likely caused by padding or margin somewhere between the body tag, and/or the footer tag and everything inside it. In chrome's code inspector I see calculated margin-bottom of 20px in <div class="navbar...">, and also 60px in <body>.
A quick test is to modify <div class="navbar">:
<footer>
<div class="navbar navbar-default" style="margin: 0;">
See if anything changed. If not:
<body style="margin: 0;">
Tested in Chrome's code inspector and the footer is placed at the bottom without any spacing (and doesn't "stick"), but it's a hack so you should probably find a better way / to follow the bootstrap's logic.
Try this
You can try this
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
This an HTML
Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
This is the easiest way I've been able to get a header/body/footer to work. Demo
HTML
<div class="wrap">
<div class="header">
</div>
<div class="body">
</div>
</div>
<div class="footer">
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.header {
height: 100px;
background-color: red;
}
.wrap {
height: 100%;
background-color: green;
margin-bottom: -100px; /* Must be negative height of footer */
}
.footer {
height: 100px;
background-color: blue;
}