I simply want the :before (underline) of my anchor to change its height every time it is hovered over, but it's not working.
I hope someone could help me. Thanks in advance.
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
display: inline-block;
text-decoration: none;
font: 4em Arial;
color: #21a1e1;
font-weight: 300;
position: relative;
}
a:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
background: #21a1e1;
transition: all .3s ease-in-out;
}
/* not working */
a:hover a:before {
height: 4px;
}
<div class="wrapper">
Hover
</div>
use a:hover::before instead of a:hover a:before I'm added the working snippet below.
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
display: inline-block;
text-decoration: none;
font: 4em Arial;
color: #21a1e1;
font-weight: 300;
position: relative;
}
a:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
background: #21a1e1;
transition: all .3s ease-in-out;
}
/* not working */
a:hover::before {
height: 4px;
}
<div class="wrapper">
Hover
</div>
Related
I cant seem to get the nav bar items to align to the center even if I set the align-items value to center, I cant seem to find any part of code which commands the nav bar items to stick to the right either!
I need a solution to this
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav {
display: flex;
height: 80px;
width: 100%;
background: #1b1b1b;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
color: #fff;
font-size: 35px;
font-weight: 600;
}
nav ul {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i{
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav{
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i{
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a:hover {
background: none;
color: cyan;
}
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: -1;
width: 100%;
padding: 0 30px;
color: #1b1b1b;
}
.content div {
font-size: 40px;
font-weight: 700;
}
That's my CSS code, I tried to do what I could but I cant fix the problem
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: flex-end; = inserts elements to the right x-axis position.
first of all to make it horizontally center you need to make the justify-content:center not the align-items
your code should be
nav{
/*...*/
justify-content:center;
/*...*/
}
I have a button (which is actually a link using <a>).
I have to use a pseudo-element i.e. ::after
The problem is I want to skew the pseudo-element and then clip it to my original box.
#import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
display: flex;
justify-content: center;
text-align: center;
color: #788;
}
#hover-skew {
display: block;
text-decoration: none;
color: #ffffff;
width: 7em;
padding: 1em;
background-color: #000000;
font-size: 30px;
font-family: Staatliches;
letter-spacing: 0.3em;
position: relative;
z-index: 1;
}
Button
This is my button without the pseudo-element.
#import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
display: flex;
justify-content: center;
text-align: center;
color: #788;
}
#hover-skew {
display: block;
text-decoration: none;
color: #ffffff;
width: 7em;
padding: 1em;
background-color: #000000;
font-size: 30px;
font-family: Staatliches;
letter-spacing: 0.3em;
position: relative;
z-index: 1;
}
#hover-skew::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #777;
z-index: -1;
transform: skewX(-30deg) scale(1.3, 1);
-webkit-background-clip: border-box;
overflow: hidden;
transition: transform 200ms ease-in;
}
Button
Notice how it's overflowing? I want it to be of the original size as the box.
I know I have used scale, but it doesn't matter right, also to clarify, I used scale as I have used skew, so scaling makes it fit the box.
Also to clarify, I used skew so that I will scale the ::after element to 0, and the scale it to 1 on :hover to create a nice effect.
I'm trying to copy the style of the button on hover on this website but by using the <a> tag, so if you got any other approach then please comment.
Thank You.
Here is an example:
#import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
body {
display: flex;
justify-content: center;
text-align: center;
color: #788;
}
#hover-skew {
display: block;
text-decoration: none;
color: #ffffff;
width: 7em;
padding: 1em;
background-color: #000000;
font-size: 30px;
font-family: Staatliches;
letter-spacing: 0.3em;
position: relative;
z-index: 1;
overflow: hidden;
}
#hover-skew:after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 120%;
top: 0;
left: -5%;
z-index: -1;
transition: transform .3s ease-out;
transform: translateX(-100%) skew(-10deg);
background-color: #777;
}
#hover-skew:hover:after {
transform: translateX(0) skew(-10deg);
}
Button
Useful sources:
pseudo-element hover
I would like to create a dropdown menu that displays an image in the second dropdown. I have written the CSS code as it should be written, and I think there is no problem with the structure of my HTML code as well. So, after hovering on Afyon White list item, there should be displayed an image(position is not adjusted yet) but it does not. Any suggestions?
/* regardless */
li {
list-style: none;
text-transform: uppercase;
}
/* theme.scss */
.MegaMenu__Inner {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: column;
margin: 0 auto;
padding: 0 10px;
}
#media screen and (min-width: 1240px) {
.MegaMenu__Inner {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
}
/* sca-jqueryblabla.scss */
.MegaMenu__Item {
display: inline-block;
position: relative;
width: 5rem;
transition: all 0.9s ease-in-out;
}
.MegaMenu__Item > .MegaMenu__Title {
display: inline-block;
}
.MegaMenu__Item > .MegaMenu__Title:hover {
transition: all 0.9s ease-in-out;
}
.MegaMenu__Title--dropdown {
display: none;
position: absolute;
z-index: 1;
width: 100%;
margin-top: -1.5rem;
margin-left: 4rem;
width: 100%;
transition: all 0.9s ease-in-out;
}
.DropdownList--li {
width: 9rem;
padding: 0.4rem;
}
.MegaMenu__Title--dropdown .DropdownList {
display: block;
position: relative;
}
.MegaMenu__Item:hover .MegaMenu__Title--dropdown {
display: block;
transition: all 9s ease-in-out;
}
.MegaMenu__Item.MegaMenu__Item--fit {
cursor: pointer;
padding: 0.5rem;
text-align: center;
background-color: white;
}
.MegaMenu__Item.MegaMenu__Item--fit a {
text-decoration: none;
color: #5c5c5c;
}
.MegaMenu__Item {
position: relative;
}
.Linklist {
position: absolute;
}
.DropdownList {
position: relative;
display: inline-block;
}
.color-nav {
display: none;
position: absolute;
width: 10rem;
height: 10rem;
border: 3px solid black;
}
.DropdownList--li:hover .color-nav {
display: inline-block;
}
<div class="MegaMenu__Item MegaMenu__Item--fit">
<a href="" class="MegaMenu__Title Heading Text--subdued u-h7"
>White</a>
<div class="MegaMenu__Title--dropdown">
<ul class="DropdownList DropdownList_White">
<li class="DropdownList--li DropdownList_White--li">
<a>Afyon White</a>
</li>
<div class="color-nav">
<img src="" alt="">
</div>
</ul>
</div>
</div>
The following <div>:
<div class="color-nav">
<img src="" alt="">
</div>
should be inside the <li> that has the class DropdownList--li DropdownList_White--li in order to be able to be selected as per your CSS which is:
.DropdownList--li:hover .color-nav {
display: inline-block;
}
That is, above, you are selecting .color-nav as a child of .DropdownList--li, but in your HTML the .color-nav is not its child.
When the screen width becomes less than 767, the menu turns into a burger and on IE it looks different.
The alignment of items with flex disappears (the burger button and the basket are pressed), I sin on the menu that is positioned with
using fixed (becomes fixed at the checkpoint), I think that on IE the menu still takes its
the place, because of which the alignment occurs with its consideration. If you comment out the menu, everything will be ok.
How to fix it?
enter image description here
header in static condition
enter image description here
<div class="header_body">
<a href="#">
<h1>ze<span>bra</span></h1>
</a>
<div class="wrap-align">
<nav class="header_menu">
<ul class="header_list">
<li>Home</li>
<li>Products</li>
<li>Shopping</li>
<li>Contact</li>
</ul>
</nav>
<div class="price">
<a href="#">
<img src="img/Shape1.png" alt="">
</a>
<span>$35.00</span>
<span>▼</span>
</div>
<div class="header_burger">
<span></span>
</div>
</div>
</div>
//css
.header_body {
position: relative;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
height: 86px;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
> a {
text-decoration: none;
color: $colorWord_header;
position: relative;
z-index: 5;
display: inline-block;
margin-right: 40px;
}
a > h1 {
font-size: 38px;
font-family: "HelveticaNeueCyr-Bold";
text-transform: uppercase;
}
a > h1 > span {
color: $logo_color;
}
}
.wrap-align {
width: 650px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_burger {
display: none;
}
.header_menu {
// margin-right: 118px;
}
.header_list {
display: flex;
position: relative;
z-index: 2;
li {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: $colorWord_header;
font-size: 18px;
font-family: "HelveticaNeueCyr-Regular";
padding: 34px 15px;
transition: all 0.3s;
&:hover {
color: #fff;
background-color: $bgc_head;
}
}
}
.price {
position: relative;
z-index: 5;
a {
text-decoration: none;
}
img {
vertical-align: baseline;
}
a + span {
font-size: 24px;
font-family: "HelveticaNeueCyr-Regular";
color: rgb(157, 157, 157);
margin: 0 10px;
}
span + span {
font-size: 18px;
color: rgb(157, 157, 157);
vertical-align: super;
cursor: pointer;
}
}
//#media
.header {
.header_burger {
display: block;
position: relative;
width: 30px;
height: 20px;
position: relative;
z-index: 3;
}
.header_burger:before,
.header_burger:after {
content: "";
position: absolute;
background-color: black;
width: 100%;
height: 2px;
left: 0;
transition: all 0.3s;
}
.header_burger:before {
top: 0;
}
.header_burger:after {
bottom: 0;
}
.header_burger span {
position: absolute;
top: 9px;
left: 0;
background-color: black;
width: 100%;
height: 2px;
transition: all 0.3s;
}
.header_burger.active span {
transform: scale(0);
}
.header_burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header_burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header_menu {
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.941);
padding: 130px 0 0 0;
transition: all 0.4s;
z-index: 1;
}
.wrap-align {
width: 300px;
}
.header_menu.active {
top: 0;
}
.header_list {
margin: 0 0 0 20px;
display: block;
li {
// margin: 10px 0;
}
a {
padding: 10px 20px;
}
}
.price {
margin-right: -30%;
}
}
I am creating a simple navigation in angular 6, am using bem methodology and flexbox for css.
Here is the navigation markup:
<div class="main-header">
<nav class="main-nav" ng-sticky [offSet]="0" [addClass]="'main-sticky'" appMainNav #ref="appMainNav">
<div class="main-nav__logo " ng-sticky [offSet]="0" [addClass]="'main-sticky__logo'">
<img class="man-nav__logo-green" src="/assets/images/logo-white.png">
</div>
<div class="main-nav__toggle">
<i class="main-nav__bars fa fa-bars" ng-sticky [offSet]="0" [addClass]="'main-bars'"></i>
</div>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
<li class="main-nav__item">
<a class="main-nav__link" href="#">Home</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">About us</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#">What we do</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link " href="#">Projects</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link " href="#">Contact</a>
</li>
</ul>
</nav>
<div class="main-banner">
<h2>We are a team of
<strong>experts</strong>.</h2>
<p>Founded in 2014, the BDTS Poland specializes in IT personnel outsourcing for the areas of banking, insurance, telecommunications,
high-tech, pharmacy, logistics and many others</p>
<a href="http://en.astek.pl/about-us/" class="main-banner__green-button main-banner__arrow-right">Read more
<i></i>
</a>
</div>
</div>
Here is the mobile CSS for navbar:
#media only screen and(max-width: 768px) {
.main-nav {
margin: 0;
display: block;
position: inherit;
height: auto;
overflow: auto;
background: white;
}
.main-nav__list {
margin-top: 20px;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-nav__item:after {
content: '';
width: 1px;
}
.Navbar__ToggleShow {
display: flex;
}
.main-nav__logo {
position: relative;
bottom: 49px;
background-repeat: no-repeat;
background-image: url("/assets/images/logo-green.png");
}
.man-nav__logo-green {
visibility: hidden !important;
}
.main-nav__bars {
display: flex;
justify-content: flex-end;
cursor: pointer;
padding: 26px;
font-size: 50px;
color: #00964e;
top: 0;
margin-top: -196px;
}
.main-nav__link {
color: #444;
}
}
In desktop version everything works fine: but in mobile version navbar increase its height on scroll and hamburger menu disappears,
Here is the solution I tried: (removing height in .man-nav)
.main-nav {
margin: 0;
display: block;
position: inherit;
overflow: auto;
background: white;
}
Now navbar height does not increase on scroll but hamburger menu disappear.
UPDATE - Here is the full CSS for navbar component:
#charset "UTF-8";
#font-face {
font-family: "icomoon";
src: url("/assets/fonts/icomoon.ttf");
}
.main-header {
width: 100%;
float: left;
display: block;
min-height: 100vh;
height: 100%;
background-size: cover;
background-position: center;
padding-bottom: 100px;
background-image: url("/assets/images/banner.jpg");
}
.main-sticky {
background-color: white;
height: 100px;
}
.main-sticky__logo {
position: relative !important;
background-repeat: no-repeat;
background-image: url("/assets/images/logo-green.png");
}
.main-sticky-link .main-nav__link {
color: #444 !important;
}
.main-nav {
position: sticky;
align-items: center;
justify-content: space-around;
left: 0;
display: flex;
z-index: 2;
width: 100%;
}
.main-nav__logo {
position: relative;
}
.main-nav__bars {
color: white;
}
.main-nav__list {
list-style: none;
display: flex;
color: white;
position: relative !important;
}
.main-nav__item {
padding: 24px 27px;
position: relative;
}
.main-nav__item:after {
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
content: "";
display: block;
float: left;
background-color: #f5f5f5;
width: 2px;
height: 60px;
-webkit-transform: rotate(20deg);
transform: skew(155deg);
position: absolute;
right: 0;
bottom: 6px;
}
.main-nav__item:last-child::after {
content: "";
width: 0px;
}
.main-nav__item:hover::after {
width: calc(100% + 1px);
}
.main-nav__item:hover .main-nav__link {
color: #444;
position: relative;
z-index: 3;
}
.main-nav__link {
list-style: none;
font-size: 1rem;
color: white;
font-family: "proxima-nova-n6", "proxima-nova";
font-style: normal;
font-weight: 600;
}
.main-nav__bars {
display: none;
}
.main-banner {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.main-banner h2 {
font-size: 3.75rem;
line-height: 5.375rem;
margin-bottom: 1.5rem;
color: #fff;
font-family: "proxima-nova-n4", "proxima-nova";
font-style: normal;
font-weight: 400;
margin-top: 70px;
font-weight: normal;
}
.main-banner p {
font-size: 1.25rem;
font-weight: normal;
color: white;
text-align: center;
max-width: 700px;
margin-bottom: 3.375rem;
margin-right: auto;
margin-left: auto;
}
.main-banner__green-button {
height: 3.4375rem;
background-color: #00964e;
text-decoration: none;
color: #fff;
padding: 11px 13px;
display: inline-block;
box-sizing: border-box;
line-height: 27px;
border-radius: 30px;
border: 3px solid #00964e;
font-size: 1.125rem;
padding-right: 50px;
font-family: "proxima-nova-n6", "proxima-nova";
font-style: normal;
font-weight: 600;
position: relative;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.main-banner__arrow-right::after {
font-family: "icomoon";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
content: "" !important;
font-size: 33px;
}
.main-banner__green-button::after {
float: right;
content: "";
display: block;
width: 34px;
height: 34px;
margin-left: 10px;
top: 10px;
position: absolute;
right: 10px;
}
.main-banner__green-button:hover {
background-color: white;
color: green;
}
.main-banner__arrow-down {
transform: rotate(90deg);
width: 34px;
height: 34px;
position: absolute;
bottom: 176px;
margin-left: -17px;
left: 50%;
z-index: 2;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
background-image: url("/assets/images/icon-arrow-right.png");
}
#main-sticky {
background-color: white;
}
#media only screen and (max-width: 768px) {
.main-nav {
margin: 0;
display: block;
position: inherit;
height: auto;
overflow: auto;
background: white;
}
.main-nav__list {
margin-top: 20px;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-nav__item:after {
content: "";
width: 1px;
}
.Navbar__ToggleShow {
display: flex;
}
.main-nav__logo {
position: relative;
bottom: 49px;
background-repeat: no-repeat;
background-image: url("/assets/images/logo-green.png");
}
.man-nav__logo-green {
visibility: hidden !important;
}
.main-nav__bars {
display: flex;
justify-content: flex-end;
cursor: pointer;
padding: 26px;
font-size: 50px;
color: #00964e;
/* position: absolute; */
top: 0;
/* bottom: 36px; */
/* right: 28px; */
margin-top: -196px;
}
.main-nav__link {
color: #444;
}
.main-banner__arrow-down {
display: block !important;
position: initial;
margin: 0 auto;
margin-top: 50px;
}
.main-banner h2 {
text-align: center;
}
}
Here is a link to the live demo
Here is GitHub repo if interested
What is wrong with my code? please help, any suggestions will be appreciated, thanks.
There is a lot to debug, here is what I spotted:
nav bar (.main-nav):
First of all, you got a script (index.js) that sets main-nav, main-nav__bars and main-nav__list position to fixed on scroll. You don't need to do that for all three components. Just set main-nav and let the children inherit.
Next you're better off changing height: auto to min-height: 125px (enough to fit the logo)
Then you need to set the nav .main-nav) overflow-x: hidden to eliminate the scrollbar on the right when overflow bugs occur.
Or better yet, make your logo itself and it's container (.main-nav__logo) have a fixed height that matches (height: 125px) and let the logo height: inherit. (you will need to crop your image for that to look nice. See reason on next section)
You're also overriding the display: flex to block with your media query. Remove that so you will be able to use the flex properties. Afterwards you can do something like: (append into your mobile media query)
.main-nav {
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.main-nav__logo {
flex: 2 1 60%;
}
.main-nav__toggle {
flex: 2 1 30%;
}
.main-nav__list {
flex: 0 1 100%;
}
This should give you a result like this:
|-----------------------|----------|
| Logo | Bars |
|-----------------------|----------|
| |
| Nav ul |
| |
|----------------------------------|
Logo (.man-nav__logo-green):
Next your logo is 200x200 with lots of transparent margin, fix your logo by cropping it down using Photoshop or something to element the fixed margin. This will let your logo to fit in without overflowing the nav bar. (and more flexible in regards to margin styling)
a dirty solution is to change the logo's container to (.main-nav__logo) height: 160px and add a margin-top: -35px.
Hopefully that should make your life a bit easier. Regards.