I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.
The nav dropdown as show in this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here.
I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.
I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.
I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.
I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.
// navbar css
* {
margin: 0px;
}
:root {
--bg: #242526;
--bg-accent: #484a4d;
--nav-size: 60px;
--border: 1px solid #474a4d;
--border-radius: 8px;
--speed: 500ms;
margin-top: 75px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
/* color: #dadce1; */
text-decoration: none;
}
.logo {
color: #dadce1;
margin: 0px;
display: flex;
align-items: center;
}
.navbar {
height: var(--nav-size);
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
}
.navbar-list {
max-width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.nav-item {
width: calc(var(--nav-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.icon-button {
--button-size: calc(var(--nav-size) * 0.5);
width: var(--button-size);
height: var(--button-size);
/* background-color: #484a4d; */
border-radius: 50%;
padding: 5px;
margin: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown {
position: absolute;
z-index: 1;
top: 56px;
width: 300px;
transform: translateX(-35%);
background-color: rgb(16, 85, 211);
border: var(--border);
border-radius: var(--border-radius);
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 1;
}
.menu-item {
height: 50px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
/* transition: background var(--speed); */
padding: 0.5rem;
}
.menu-item:hover {
background-color: #525357;
}
.nav-profile-pic {
max-width: 75px;
}
// review-list css
button, .sort-by {
z-index: -1;
}
By just seeing your CSS, the easiest would be:
add z-index: 1000; (or any needed value) to the position: fixed; parent element .navBar.
Its child elements will perform accordingly - overlaying other elements on the page.
Z-index MDN Docs
and keep in mind to use z-index on elements with CSS having positon (other than : static;)
Related
.NavbarA {
color: #bb9770;
float: left;
}
.navbar {
padding: 10px;
margin: 0 auto;
border: 1px solid #bb9770;
align-content: center;
align-items: center;
align-self: center;
justify-content: center;
background-color: #ffdab9;
}
.navbar .links {
margin-left: auto;
float: right;
flex-wrap: nowrap;
margin-top: 3px;
align-content: center;
align-items: center;
align-self: center;
justify-content: center;
}
.navbar a {
margin-left: 16px;
text-decoration: none;
color: #bb9770;
position: relative;
padding: 10px;
margin-bottom: auto;
font-weight: bolder;
}
.navbar a:hover {
color: white;
}
.navbar a::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.navbar a:hover::before {
transform: scaleX(1);
transform: scaleY(2);
transform-origin: bottom left;
}
.navbar a::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: #ffdab9;
z-index: -1;
transition: transform .3s ease;
}
#media(max-width: 800px) {
.navbar .links {
display: none;
visibility: hidden;
}}
^^^ CSS
const Navbar = () => {
return (
<nav className="navbar">
<h2 className="NavbarA">A</h2>
<div className="links">
Home
Sample
Staff
About
Contact
Donate
Gallery
Preorder
</div>
</nav>
);
};
export default Navbar;
So I have a navbar and I am trying to align the items in one row, but for some reason, as you can see in the picture, the preorder tab is on the bottom and I don't want it to be there, but I can't fix it somehow? If I add anything new to the navbar, everything remains the same, but there is always 1 item that drops down to the second line no matter how many nabber items I add (no more than one item drops down). I am using react to code the js. I pasted the css and js above. Please help.
.navbar .links {
float: right;
flex-wrap: nowrap;
white-space: nowrap
/* white space makes it so the navbar does not come down again */
}
This is basically what I did to fix the problem. Adding the portion white-space: nowrap; makes it so that the Navbar does not go to a second line.
I'm adding a ribbon to a card and I want to display dynamically the content and the color based on props. I successfully did it with attr() for the content, but it seems I'm stucked to update the background-color, how can I do it?
HTML:
<span class="ribbon zindex-2" :data-content="content" />
SCSS:
.ribbon {
position: absolute;
width: 100px;
height: 100px;
top: 0px;
left: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.ribbon::before {
content: attr(data-content);
position: absolute;
width: 150%;
height: 28px;
background: red; /* value to update dynamically but I don't know how */
transform: rotate(-45deg) translateY(-20px);
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: 600;
color: #fff;
letter-spacing: 0.1em;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
The content variable is coming from a Vue Prop. For example, I want to set this background to gold if the content variable is "1", gray if it's "2" and so on...
Thanks
You could use attribute selectors in css:
.ribbon[data-content="1"]::before {
background: gold;
}
.ribbon[data-content="2"]::before {
background: gray;
}
I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}
Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.
I'm trying to create some sort of "slide menu" where all the items are shown, and the current item is standing out.
The issue I have right now is that when an item is selected, it does not scroll to the center of the container.
To solve that issue, I added a wrapper element between the items and the container and sets the width to be extremely large, then with JavaScript scroll to the current item.
Is there a way to achieve the same result without doing this workaround?
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
overflow: hidden;
width: 400px;
height: 60px;
background-color: darkcyan;
padding: 10px;
margin-bottom: 10px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.wrapper.hard {
width: 10000000px;
}
.item_wrapper {
flex-shrink: 0;
height: 100%;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.box, .box2 {
height: 80%;
width: 70px;
background-color: cyan;
transition: all 0.2s;
}
.box.current, .box2.current {
height: 100%;
width: 80px;
transition: all 0.2s;
}
https://jsfiddle.net/Dynacord/sz3daL46/
I am trying to divide a practice website into three sections of a column using flexbox. However, the middle section overflows out of the flexbox row, and the footer section is now hidden behind it.
https://jsbin.com/rerulepawu/edit?html,output
What causes this? I experimented with flex-grow and flex-shrink but it did not help.
Any advice would be appreciated. Thanks.
text in flexboxes usually overlap within the flex container to fix this you can set
.row {
flex: 1;
display: flex;
overflow:auto;
min-height: min-content;
}
and as a hack I set a non flex span inside a flex div, and set it's display to block
btw everything goes to crap when you delete it because Justify content dictates position within a flew box, if your whole site is one big flex box.
this is the full CSS that works for me displaying footer
body {
background-color: rgb(64, 160, 223);
font-family: 'Futura', sans-serif;
color: white;
}
.column {
display: flex;
height: 93%;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
overflow:auto;
}
.block {
margin: auto;
}
.section_block {
margin: 20px;
height: 100px;
}
.section_left {
background-color: yellow;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_right {
background-color: red;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_title {
font-weight: bold;
}
.section_description {
text-align: center;
vertical-align: middle;
}
.section_photo {
margin: 0
}
.content {
border-radius: 15px;
background-color: white;
width: 80%;
color: black;
display: flex;
flex-direction: column;
}
/* why does everything go to shit when i delete this */
#contact {overflow:auto;
flex: 0;
justify-content: flex-end;}