I have simple navigation bar with position:sticky that displays not clear when scrolled and everything seems to work fine then it is in the top.
As you can see from the images above there seems to be some render problem. Here is the css:
body{
/*For demo purpose*/
height:300vh;
}
* {
font-family: RobotoThin;
margin: 0;
padding: 0;
overflow-x: hidden;
outline: none;
-webkit-transition: 1s;
transition: 1s;
box-sizing: border-box;
background-repeat: no-repeat;
transition: 0.5s !important;
scroll-behavior: smooth;
}
div.window {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
padding: calc(2vh + 2vw);
height: 100vh;
width: 95vw;
position: absolute;
right: 0;
top: 0;
display: none;
white-space: nowrap;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #ecf0f1;
margin-left: 5vw;
}
#help{
display:block;
transition:0s !important;
}
div#help{
height:200vh;
white-space: normal;
}
div#help a{
color:red;
text-decoration: none;
}
div#nav {
top: 0;
position: sticky;
display: flex;
justify-content: space-between;
color: black;
background-color: white;
padding-top: 1vmax;
padding-bottom: 1vmax;
font-size: 1.2vmax;
flex-wrap: wrap;
border-radius: 10em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div#nav>a {
color: black;
}
div#nav>*:hover {
color: gold;
letter-spacing: 0.3vw;
}
div#nav> :first-child {
margin-left: 1vw;
}
div#nav> :last-child {
margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
Don't mind the color. I use a plugin so you will see everything in white, not in black.
Strangely I couldn't get the example to work properly and I can not represent the issue. Hopefully you can take a look at my code and tell what may cause this problem.
After much fiddling, the culprit is:
overflow-x: hidden;
body {
/*For demo purpose*/
height: 300vh;
}
* {
font-family: RobotoThin;
margin: 0;
padding: 0;
/* overflow-x: hidden; <-- The problem */
outline: none;
-webkit-transition: 1s;
transition: 1s;
box-sizing: border-box;
background-repeat: no-repeat;
transition: 0.5s !important;
scroll-behavior: smooth;
}
div.window {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
padding: calc(2vh + 2vw);
height: 100vh;
width: 95vw;
position: absolute;
right: 0;
top: 0;
display: none;
white-space: nowrap;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #ecf0f1;
margin-left: 5vw;
}
#help {
display: block;
transition: 0s !important;
}
div#help {
height: 200vh;
white-space: normal;
}
div#help a {
color: red;
text-decoration: none;
}
div#nav {
top: 0;
position: sticky;
display: flex;
justify-content: space-between;
color: black;
background-color: white;
padding-top: 1vmax;
padding-bottom: 1vmax;
font-size: 1.2vmax;
flex-wrap: wrap;
border-radius: 10em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div#nav>a {
color: black;
}
div#nav>*:hover {
color: gold;
letter-spacing: 0.3vw;
}
div#nav> :first-child {
margin-left: 1vw;
}
div#nav> :last-child {
margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
Related
I am really new to working on this, the problem I have is two
What I am trying to do is give it to show the menu as shown in the following image:
I can not put the option that was selected underlined, and so that the displayed menu is horizontal, what I have is this:
Searching the web I have not found anything to solve it or something to take an example to solve my problem, I am working with CSS and Vue.Js, if someone can tell me how to solve this
Underline the selected menu and see the menu displayed horizontally
My Code:
<div class="panel-group" id="accordion-mbl-menu">
<div class="panel">
<b-navbar-toggle target="collapse-cat-lvl1-469">
Accesorios
<img src="#/assets/images/layout/menu/chevron.svg" class="icon">
</b-navbar-toggle>
<div style="background-color:white;">
<b-collapse id="collapse-cat-lvl1-469">
<div data-cat-acc="473" class="grid-item parent-lvl-2">
<a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
<span class="text">GTI</span>
</a>
</div>
...
(other menu options)
...
</b-collapse>
</div>
</div>
<div class="panel">
<button type="button" class="navbar-toggler collapsed"> ¿Necesitas ayuda? </button>
</div>
</div>
My code CSS
#media (max-width: 828px) {
#menu-header.show {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#menu-header {
display: block ;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 100px;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
width: 90%;
padding: 20px 20px;
max-width: 87.5%;
transform: translateX(-100%);
transition: transform 650ms ease;
.grid-sty-1 {
height: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
height: 40px;
font-size: 16px;
font-family: "VWHead-Bold", sans-serif;
position: relative;
a{
text-decoration: none;
outline: none !important;
padding-right: 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
> .text {
padding-left: 15px;
color: #001E50;
}
}
.navbar-greetings{
font-family: 'VWHead-Regular';
font-size: 24px;
line-height: 29px;
display: flex;
align-items: center;
color: #001E50;
}
#accordion-mbl-menu {
margin: 0;
.panel {
box-shadow: none !important;
background-color: transparent;
border-radius: 0;
border: 0;
margin-bottom: 0;
> button.collapsed {
color: #001e50;
> .icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
> button.not-collapsed > .icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
> button {
margin: 0px;
padding: 0px;
width: 100%;
height: 55px;
font-size: 20px;
font-family: "VWHead-Bold";
font-weight: normal;
color: #2f3538;
text-decoration: none;
outline: none !important;
border-bottom: 1px solid #dee1e3;
padding-right: 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
> .icon {
width: 20px;
height: 20px;
fill: currentColor;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
position: absolute;
right: 15px;
top: auto;
}
.collapse.in {
display: block;
}
}
}
}
}
}
Any way to style this?
To show underline on hover
.class:hover {
text-decoration: underline;
}
To display horizontal
.container {
display: flex;
flex-direction: row;
}
I'm trying to have a circular tag pinned in the top right corner.
By the way it's cropped:
Here is my html
<div class='row'>
<div class='product'>
<div class='discount'>
<span class='green'>
40%
</span>
</div>
<div class='product_header'>
10 luglio
</div>
<div class='product_inner'>
<img src='https://images-na.ssl-images-amazon.com/images/I/61eHXu2AgXL._SL1000_.jpg' width='300'>
<p>Nike Air (Women)</p>
<p>Size 7</p>
<p class='price'>
Price £199.99
</p>
<button>guarda offerta</button>
<button>Storico prezzi</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
</div>
And here the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
}
.row {
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.product {
box-shadow: 1px 5px 15px #CCC;
background-color: white;
width: 15em;
height: auto;
padding: 2em;
margin: 1em;
overflow: hidden;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.product .discount {
position: absolute;
right: -10px;
top: -10px;
}
.product .discount span.green {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #5EA226;
width: 3em;
height: 3em;
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
}
.product img {
max-width: 100%;
height: auto !important;
text-align: center;
}
.product_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.product_inner p {
color: black;
}
.product_inner .price {
color: red;
font-size: 2em;
}
.product_inner button {
border: 1px solid black;
color: #000;
font-size: 1em;
border-radius: 3px;
padding: 0.5em 3em;
margin: 1em 0 0 0;
background: none;
cursor: pointer;
-webkit-transition: background ease-in .25s;
transition: background ease-in .25s;
}
.product_inner button:hover {
background: rgba(255, 255, 255, 0.5);
color: green;
}
.product_inner button:before {
font-family: FontAwesome;
content: '\f07A';
color: #000;
position: absolute;
font-size: 1.5em;
margin: 0 -1.5em;
}
.product_inner button:hover:before {
color: green;
}
.product_overlay {
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.product_overlay h2 {
color: rgba(43, 45, 66, 0.7);
font-size: 1.2em;
margin: 1em 0;
}
.product_overlay i {
color: rgba(43, 45, 66, 0.7);
font-size: 1.5em;
}
The cropped tag is in the top tight corner, I try with z-index but I don't understand what is the issue...
I also have a codepen
change this:
.product{
box-shadow: 1px 5px 15px #CCC;
background-color: white;
width: 15em;
height: auto;
padding: 2em;
margin: 1em;
overflow: hidden;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
to this:
.product{
box-shadow: 1px 5px 15px #CCC;
background-color: white;
width: 15em;
height: auto;
padding: 2em;
margin: 1em;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
I am trying to remove the text-decoration of a flex child when the parent is the anchor. I've tried all of the following code, and it is not working at all. I've created a jsFiddle, and on that the underline shows all the time and not on hover. In my WordPress installation, it only shows on hover. I'm really not sure what to do! Any help is appreciated!
Thank you ahead of time!!!!
.fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover,
.fleximagebox_link a:hover, .fleximagebox_link:hover a,
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a,
a .image_background:hover, .image_background.fleximagebox_link a:hover,
a .image_background.fleximagebox_link:hover {
text-decoration: none!important;
}
Here is the jsFiddle that explains what I'm talking about: https://jsfiddle.net/Clare12345/th60mde3/2/
This will get rid of the underline in your fiddle .flexbox_images a { text-decoration: none; }
As to why it's on your website, all we can do is guess if you don't include the code or a link to your site. But you might try changing that line to .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }
.flexbox_images a {
text-decoration: none;
}
.main_box {
background: white;
height: 400px;
width: 100%;
margin: 0 auto;
padding: 0px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.main_box .flexbox_images {
color: white;
width: 100%;
padding: 0px;
overflow: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flexbox_images a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.image_background {
height: 250px;
margin: 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 101%;
}
.image_background_left {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-end;
margin-right: -1px;
}
.image_background_right {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-start;
margin-left: -1px;
}
.fleximagebox_link {
font-size: 28pt;
background: rgba(255, 255, 255, 0.85);
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 130px;
}
.image_background_left .fleximagebox_link {
justify-content: flex-end;
padding-left: 35px;
}
.image_background_right .fleximagebox_link {
justify-content: flex-start;
padding-right: 35px;
}
.image_background_right .fleximagebox_link p {
font-size: 28pt!important;
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 0px;
}
.main_black_bar {
width: 3px;
background: #000;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: -1px;
}
.image_background_left .main_black_bar {
margin-left: 35px;
}
.image_background_right .main_black_bar {
margin-right: 35px;
}
<div class="main_box">
<div class="flexbox_images">
<a href="">
<div class="image_background image_background_left">
<div class="fleximagebox_link">Buy
<div class="main_black_bar"> </div>
</div>
</div>
</a>
<a href="">
<div class="image_background image_background_right">
<div class="fleximagebox_link">
<div class="main_black_bar"> </div>Sell</div>
</div>
</a>
</div>
</div>
The horizontal rule on the right overlaps the text in Safari on desktop and mobile.
How can I prevent the overlap?
http://codepen.io/simply-simpy/pen/EyENLr
h2 {
align-items: center;
display: flex;
font-size: 3.125vw;
margin-top: 0;
position: relative;
width: 100%;
}
h2:after {
border-top: 1px solid #000;
content: "";
display: block;
margin-left: 1.875vw;
width: 100%;
}
h2:before {
border-top: 1px solid #000;
content: "";
display: block;
margin-right: 1.875vw;
width: 100%;
}
.container {
align-items: center;
align-content: center;
text-align: center;
display: flex;
flex-direction: column;
}
<div class="container">
<h2>precision</h2>
</div>
Using flex-grow: 1; instead of width: 100%; on your h2:before and h2:after will solve the issue.
h2 {
align-items: center;
display: flex;
font-size: 3.125vw;
margin-top: 0;
position: relative;
width: 100%;
}
h2:after {
border-top: 1px solid #000;
content: "";
display: block;
margin-left: 1.875vw;
flex-grow: 1; /* <--- Replace */
}
h2:before {
border-top: 1px solid #000;
content: "";
display: block;
margin-right: 1.875vw;
flex-grow: 1; /* <--- Replace */
}
.container {
align-items: center;
align-content: center;
text-align: center;
display: flex;
flex-direction: column;
}
<div class="container">
<h2>precision</h2>
</div>
I am using flex box and want to align button to the bottom.
I am using position absolute and bottom: 0, but browser is ignoring it.
<ul class="box">
<li><div>this has <br> more <br> <button>one</button></div></li>
<li><div>this has <br> more <br> content <br> <button>one</button></div></li>
<li>d<div><button>one</button></div></li>
</ul>
ul {
/* basic styling */
width: 100%;
height: 100px;
border: 1px solid #555;
/* flexbox setup */
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.box > li {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
margin: 0 1px;
padding-bottom: 20px;
border-bottom: 20px solid red;
position: relative;
}
button {
position: absolute;
bottom: 0;
}
/* our colors */
.box > li:nth-child(1){ background : #FCC; }
.box > li:nth-child(2){ background : #CFC; }
.box > li:nth-child(3){ background : #CCF; }
I can use float and not use flex-box, but I want to see if there is a solution for this using flex-box.
demo here:
http://jsfiddle.net/NJAAa/
Working WebKit version: http://jsfiddle.net/LLtmE/
In short: you need to put your text context in a separate div; make each li a flexbox and set box-orient to vertical. And remove all that absolute/relative positioning - it's no longer necessary.
The reason is the flex container has no specific width or height,since its flexible with its contents.
To ensure my statement, try with left or top, it will react for your data. If you try with right or bottom, you cant see the reaction. Since the flex container box original width / height is very less.
Check this on codepen. I hope this help and that is not late:)
ul {
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 80%;
margin: 10% auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #b2b2b2;
box-shadow: 2px 2px 3px #666666;
}
ul > li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
ul > li > button {
margin: 20px;
padding: 5px 15px;
cursor: pointer;
}
ul > li > button:hover {
color: whitesmoke;
background-color: maroon;
}
/* our colors */
ul > li:nth-child(1) {
background: #000000;
}
ul > li:nth-child(2) {
background: #191919;
}
ul > li:nth-child(3) {
background: #323232;
}
And this can be helpfull....