i am using a fixed header in a bootstrap container and try to make the header a 100% width without margins and paddings. This is the structure of the html:
<div class="container-fluid">
<div class="fixed-header" data-spy="affix" data-offset-top="200">
<!-- some content inside -->
</div>
</div>
In my css:
.affix {
padding-left: 10px;
top: 0px;
width: 100%;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.6);
}
Image below is the result but i want the header against the left side of the screen, like the red arrow shows. How can i achieve that?
add position:fixed or position:absolute and left:0;
without this codes:
.fixed-header {
padding-left: 10px;
top: 0px;
width: 100%;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.6);
height:50px;
}
<div class="container-fluid">
<div class="fixed-header" data-spy="affix" data-offset-top="200">
<!-- some content inside -->
</div>
</div>
with position:absolute and left:0;
.fixed-header {
padding-left: 10px;
top: 0px;
width: 100%;
z-index: 9999 !important;
background-color: rgba(0, 0, 0, 0.6);
height:50px;
position:absolute;
left:0;
}
<div class="container-fluid">
<div class="fixed-header" data-spy="affix" data-offset-top="200">
<!-- some content inside -->
</div>
</div>
see on full page.
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999 !important;
background-color: red;
}
<div class="container-fluid">
<div class="fixed-header">
test content
</div>
</div>
Related
I have a relatively simple modal (i've dumbed down the content for this question) which is made of an overlay, a modal container and then the modal itself.
It works as expected except for the fact that on longer pages that need to be scrolled through, it shows at the bottom of the page. I've altered the CSS several times to no avail
How can I make it so that this modal opens at the top area of the page no matter what?
.modal-vue {
display: block;
}
.modal-vue .overlay {
text-align: center;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.modal-vue .modal {
position: relative;
width: 80%;
z-index: 9999;
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
margin-top: -20%;
}
.modal-vue .close {
position: absolute;
top: 10px;
right: 10px;
}
<div style="height:1200px;">
</div>
<div class="modal-vue">
<!-- overlay to help with readability of modal -->
<div class="overlay"></div>
<!-- Modal for detail on table cell click event -->
<div class="modal">
<button class="close">x</button>
<div class="uk-grid">
<!-- Starting real modal body for iteration now -->
<div class="uk-width-5-10" style="margin-bottom:60px;">
<div class="md-card">
<div class="md-card-toolbar">
TEST
</div>
</div>
</div>
<!--end modal-->
</div>
<!--end modal overlay-->
</div>
<!--end modal-vue-->
HTML:
<div style="height:1200px;">
</div>
<div class="overlay" >
<div class="modal-vue" >
<!-- overlay to help with readability of modal -->
<!-- Modal for detail on table cell click event -->
<div class="modal">
<button class="close" >x</button>
<div class="uk-grid">
<!-- Starting real modal body for iteration now -->
<div class="uk-width-5-10" style="margin-bottom:60px;">
<div class="md-card">
<div class="md-card-toolbar">
TEST
</div>
</div>
</div>
<!--end modal-->
</div>
<!--end modal overlay-->
</div>
<!--end modal-vue-->
</div>
CSS:
body{
margin:0;
}
.modal-vue{
display: flex;
justify-content:start;
height:100vh;
align-items:start;
}
.modal-vue .overlay {
text-align: center;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.modal-vue .modal {
position: relative;
width: 80%;
z-index: 9999;
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
margin-top:2rem;
}
.modal-vue .close{
position: absolute;
top: 10px;
right: 10px;
}
Link to jsfiddle -> http://jsfiddle.net/Markov88/u9eq2oh3/23/
I want to style a nav with a border that overlaps the text, and a text that overlaps an image in order to achieve the layout in the example below.
I tried different methods but nothing worked
Example:
Example 1
here is what I got so far:
Example 2
.menu-link {
list-style: none;
margin: 2rem 0;
text-align: right;
border: 1px white solid;
}
.menu-link a {
text-decoration: none;
font-family: "Montserrat", sans-serif;
color: rgba(255, 255, 255, 0.8);
font-size: 4rem;
text-transform: uppercase;
}
img {
display: block;
object-fit: cover;
}
.intro-image {
position: relative;
width: 100%;
}
.intro-image::after {
content: "";
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section class="intro-block">
<div class="intro-text">
<h1>Front-End Developer <br />UI Designer</h1>
</div>
<div class="hero-right">
<ul class="hero-menu">
<li class="menu-link">About</li>
<li class="menu-link">Projects</li>
<li class="menu-link">Contact</li>
</ul>
<div class="intro-image">
<img src="./images/heroimg.jpg" alt="" />
</div>
</div>
</section>
I tried using "position: absolute" for the hero text but the image moves to the left.
for the navigation, I'm thinking of adding an element to HTML to contain the nav links and put a position absolute on it instead of adding border in CSS, maybe?
Is there anyway to achieve this layout? Any help is much appreciated!
You could make your elements a fixed width and height. With negative position values you can make it go outside the box. I don't know if this is what you are looking for:
html:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div class="box">
<h1>About</h1>
</div>
<div class="box">
<h1>Projects</h1>
</div>
<div class="box">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
css:
#wrapper
{
position:absolute;
right:150px;
}
.box
{
position:relative;
border: 1px solid black;
width:200px;
height: 50px;
}
.box h1
{
position:absolute;
right: -50px;
top:-18px;
}
https://jsfiddle.net/cm03bjex/21/
The position:relative makes sure that the absolute position is relative to the box not the whole screen.
I need some help, I need to code this image:
This is what I have so far:
I tried adding a margin-top, padding-top, tried all combinations of position relative and absolute, I just need some ideias on how to do it.
This is how my code is structured:
<div class="background-oficina">
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="logo.png" alt="Oficina de Redação">
</div>
</div>
</div>
This is the css for the two classes that I'm using:
.background-oficina {
background: #fff url("bg-texture.png");
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
You could use an additional absolutely positioned element to which you assign the repeated background pattern and which you put behind the original element by using z-index: -1:
html, body {
margin: 0;
}
.background-oficina {
position: relative;
border: 1px solid #333;
border-bottom: none;
}
.bg-container {
position: absolute;
z-index: -1;
left: 0;
top;
width: 100%;
height: 120px; /* or whatever height is desired */
background: url("http://placehold.it/20x15/cff");
}
.text-center {
text-align: center;
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
<div class="background-oficina">
<div class="bg-container"></div>
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">
</div>
</div>
</div>
Your trying this, you can set default height and width to parent div that consist of that logo then using position:absolute you can push that out of parent div, but don't add overflow:hidden to parent div or else it hides your image or element that you are trying to push outside parent div as hidden.
.background-oficina {
background: #fff url("https://via.placeholder.com/800x100/000") no-repeat;
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2);
background-size: 100% 100%;
width: 100%;
height: 100px;
position: relative; /*Add this*/
}
.logo {
padding-top: 50px;
margin: 0px auto;
position: absolute; /*Add this*/
bottom: -20px; /*Add this*/
}
<div class="background-oficina padding margin-bottom">
<div class="container">
<div class="col-xs-12 text-center margin-bottom">
<img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação">
</div>
</div>
</div>
I am trying to add an expanding animation to the navbar when it becomes sticky (when the user reaches the waypoint).
For some reason, the transition always jumps to the left side at the beginning instead of expanding from the center.
How can I make it "grow" from where it is?
HTML:
<header class="header">
<div class="bg"></div>
<div id="waypoint"></div>
<nav class="nav" id="nav">
<div class="wrapper">
<div class="container">
<ul>
<li>txt</li>
<li>txt</li>
<li>txt</li>
<li>txt</li>
<li>txt</li>
</ul>
</div>
</div>
</nav>
</header>
CSS:
.wrapper {
width: 600px;
background: rgba(255, 255, 255, 0.5);
margin: 0 auto;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.nav {
position: absolute;
bottom: 0;
width: 100%;
}
.nav.sticky .wrapper {
position: fixed;
top: 0;
width: 100%;
bottom: auto;
background: #d0d0d0;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
transition: 1s all ease;
}
The Javascript just adds the sticky class when the user gets to the waypoint.
JSFiddle demo - what I got so far.
For some reason, the transition always jumps to the left side at the beginning instead of expanding from the center.
That’s because the default value for left and right is auto, and therefor the “initial” calculated left value when you switch to fixed position becomes the one the left element edge had before.
Simply specify 0 for both explicitly, and it should work:
.nav.sticky .wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
/* … */
}
https://jsfiddle.net/1htqqfvb/3/
I'm trying to make div that overlays background image, but not content, like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 featured">
<div class="overlay"></div> <!--optional-->
<center>
<img src="img/logo.svg">
<h1>Title</h1>
</center>
</div>
</div>
</div>
Where div featured has background image:
.featured {
background-image: url(img/bg.jpg);
}
Now I've tried:
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
}
And also:
.featured:before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.4);
}
But it all makes overlay above content. Any better techniques?
<div style="background: #f6f2ea url(images/file.jpg) no-repeat center center;
min-height: 50%; background-size:cover;">
<div id="overlay-black">
<div>
<h3 class="bg-color">TEXT</h3>
</div>
</div>
</div>
and the css for overlay-black
#overlay-black {
background:rgba(50, 50, 50, 0.2);
opacity:0;
-webkit-transition: opacity .25s ease;
opacity:100;
height: 100%;
width: 100%;
}
I was able to do it just by declaring a position and z-index on the <h1> and img elements
See my fiddle here: https://jsfiddle.net/LwwgLc0w/