Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
Related
I use css to show colors around div when hover but I want to make it more than one color live demo I want it to be multiple colors instead of one
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container a{
position: relative;
width: 200px;
height: 60px;
display: inline-block;
background: #fff;
margin: 20px;
}
.container a::before,
.container a::after
{
content: '';
position: absolute;
inset: 0;
background: rgb(26, 214, 58);
transition: 0.5s;
}
.container a:hover:before
{
inset: -3px;
}
<style>
#import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght#1,300&display=swap');
body {
background-color: #0e1538;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
}
.btn-wrapper {
width: 200px;
height: 60px;
}
.btn {
font-family: 'Zilla Slab', serif;
font-size: 2em;
color: #ffffff;
background-color: #0e1538;
width: 190px;
height: 50px;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
.btn-wrapper:hover {
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
}
</style>
<body>
<div class="btn-wrapper center-flex">
Hover Me</div>
</div>
</body>
Instead of having a background set as a single RGB color you can set it as a background-image with multi colors introduced through a gradient.
This snippet uses a linear-gradient (which gives a sort of image type) with just 3 colors but you can have more and you can adjust how much of each you get and whether the changes go from top to bottom or left to right - see MDN documentation for the various options.
The result here is:
#import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght#1,300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Zilla Slab', serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #0e1538;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container a {
position: relative;
width: 200px;
height: 60px;
display: inline-block;
background: #fff;
margin: 20px;
}
.container a::before,
.container a::after {
content: '';
position: absolute;
inset: 0;
background: rgb(26, 214, 58);
background-image: linear-gradient(red, green, blue);
/* ADDED */
transition: 0.5s;
}
.container a:hover:before {
inset: -3px;
}
.container a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: #0e1538;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
<div class="container">
<a href="#">
<span>Hover Me</span>
</a>
</div>
I have some trouble with bootstrap carousel. I cannot remove blue under lines.
Can someone help me? It's not text decoration (text-decoration: none; doesn't work).
.carousel {
width: 100%;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none !important
}
.carousel-inner,.carousel,.carousel-indicators {
text-decoration: none;
box-shadow: none;
}
.carousel-indicators {
bottom: -150px;
text-decoration: none !important
}
.section1-text {
line-height: 1.55;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
width: 100%;
text-decoration: none !important
}
.section1-text p {
color: white;
font-size: 25px ;
margin-bottom: 30px;
width: 80%;
z-index: 2;
}
I'm learning css(scss) and i've problem with stylistic my text.
How i can get text in one line and how to center icon from fontawsome to the text?
main {
overflow: hidden;
opacity: 0.6;
.icons {
display: block;
position: relative;
font-size: 3rem;
opacity: 1;
.fire {
color: red;
display: flex;
padding-top: 5%;
padding-left: 3%;
position: absolute;
margin-top: 10%;
p {
padding-left: 5%;
display: flex;
color: blanchedalmond;
}
}
}
}
I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.
The issue is the hovering on the button doesn't trigger the hover.
Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.
//HTML
<div class="container">
<img src="src">
<div class="btn_container">
<div class=" btn">
<p>Select</p>
</div>
<div class="btn">
<p>Preview</p>
</div>
</div>
//SCSS
.container {
position: relative;
width: 100%;
img {
width: 100%;
height: auto;
}
.btn_container {
position: absolute;
width: 100%;
height: 40px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
display: none;
position: absolute;
}
img:hover + .btn_container,
.btn_container > * {
display: flex;
border: none;
text-align: center;
justify-content: space-around;
}
.btn {
padding: 6px 12px;
height: 14px;
background: var(--yellow-medium);
border-radius: 8px;
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--white);
font-family: roboto;
&:hover {
cursor: pointer;
background: var(--red);
color: var(--white);
}
}
}
Preview, button hovering not working:
If I force the hover on the img using the inspector, the button hovering seems to work:
The problem is in classes img:hover + .btn_container and .btn_container > *.
Here is the updated scss:
.container {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
border: 0;
}
&:hover .btn_container {
display: flex;
}
.btn_container {
position: absolute;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: space-around;
width: 100%;
height: 40px;
text-align: center;
background-color: var(--dark-purple-trans);
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 14px;
padding: 6px 12px;
color: var(--white);
font-family: roboto;
background-color: var(--yellow-medium);
border-radius: 8px;
cursor: pointer;
&:hover {
color: var(--white);
background-color: var(--red);
}
}
}
You can view it in action here: Codepen
I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/
.btn_container {
width: 500px;
height: 100px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
opacity: 0;
position: absolute;
}
img:hover + .btn_container,
.btn_container:hover,
.btn_container > * {
display: flex;
opacity: 1;
border: 1px solid blue;
text-align: center;
justify-content: space-around;
}
There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.
I want a heading, a logo and a button to all be in line where the heading is centered, the logo is offset to it's right and the button is small on the right hand side.
I can hack this together if I fix the margins but this is not scalable and therefore don't want it as a final solution. What's a better way to do this?
My code is below and I also have it posted here as well: http://codepen.io/blueduckyy/pen/RpKoMJ .
HTML:
<div class="top-bar username-heading">
<img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
<h1>blueduckyy</h1>
<a class="button user-edit-button" href="/users/edit">Edit</a>
</div>
CSS:
.username-heading img {
float: right;
width: 100px;
height: 100px;
margin-left:-250px;
margin-right:150px;
}
.username-heading h1 {
position: relative;
top: 18px;
left: 10px;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
float: right;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
You can place the items with 'position: absolute' inside the container:
.username-heading {
vertical-align: top;
position: static;
}
.username-heading img {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.username-heading h1 {
position: absolute;
top: 18px;
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
display: inline-block;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
position: absolute;
right: 0;
top: 120px;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
}
Keep in mind that the '.username-heading' position must be other than 'static'.
Just use positioning,
position: relative;
top: 25px;
This is the only css youll need.... Here is the pen
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: orangered;
}
img{
height: 40px;
border-radius: 50%;
}