So, I'm currently making a website and for this website i'll obviously have a nav bar, I've been trying to fix this issue on mobile where the navbar slides under all of my display and I can't figure out how to fix it.. (Photo below)
Nav Bar Under Displays
But on browser It works perfectly :/ I cant figure it out
I'm trying to get it like this
.nav-links, body {
max-width: -100%;
overflow-x: hidden;
position: sticky;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: rgba(99, 99, 99, 0.404);
font-family: 'poppins', sans-serif;
overflow-x: hidden;
}
.logo{
color: #ffff;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
z-index: 1;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(255, 255, 255);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 19px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 2px;
background-color: #fff;
margin: 5px;
transition: all 0.3s ease;
}
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;
/*...*/
}
As the title suggests I got an insanely weird error code which barely describes the error itself (shown below)
error message I got
I can't really pinpoint to the culprit, but I suspect it has something to do with the webpack or imports in my CSS code. I tried reverting back to before I had this error but it still appeared.
Searching for answers I found none as no one seems to have this specific problem.
http://localhost:8000/commons.css
#import url(https://fonts.googleapis.com/css2?family=Karantina:wght#700&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Heebo:wght#400;800&display=swap);
#import url(https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght#600&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Karantina:wght#700&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Heebo:wght#400;800&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Miriam+Libre:wght#700&display=swap);
html{
margin: 0;
padding: 0;
background-color: whitesmoke;
}
body{
margin: 0;
padding: 0;
}
input{
font-size: 1rem;
}
.hide{
display: none;
}
.layout-module--heading--8VjLO{
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 5%;
margin-bottom: 5rem;
background-color: #2F4F4F;
border-bottom: 5px solid #C4F0C4;
border-radius: 0px 0px 15px 15px;
}
.layout-module--menubtn--xDRG0{
border: 0;
padding: 0;
}
.layout-module--menu--P1Nbr{
display: none;
}
.layout-module--menudropdown--81ZJJ{
display: none;
position: absolute;
font-family: 'Karantina', cursive;
font-weight: 700;
text-decoration: none;
color: #D4F0AA;
font-size: 32px;
min-width: 160px;
z-index: 1;
}
.layout-module--menuimg--MXGBY{
display: block!important;
background-color: #2F4F4F;
height: 50px;
width: 50px;
padding: 0;
border: 0;
}
.layout-module--mainlogo--JD3jr{
width: 12.5rem;
height: 12.5rem;
}
#media only screen and (max-width: 992px) {
.layout-module--mainlogo--JD3jr{
display: none!important;
}
.layout-module--menu--P1Nbr{
display: block;
}
.layout-module--heading--8VjLO ul{
display: none;
}
.layout-module--menu--P1Nbr:hover > .layout-module--menudropdown--81ZJJ{
background-color: blue;
}
}
.layout-module--heading--8VjLO ul{
list-style: none;
}
.layout-module--heading--8VjLO ul li{
display: inline-block;
padding: 0 .8rem;
}
.layout-module--navlink--odahv{
font-family: 'Karantina', cursive;
font-weight: 700;
text-decoration: none;
color: #D4F0AA;
font-size: 32px;
}
.layout-module--navlink--odahv::after{
content: "";
background-color: #C4F0C4;
height: 3px;
width: 0%;
display: block;
transition: 0.3s ease-in;
}
.layout-module--navlink--odahv:hover::after, .layout-module--navlink--odahv:active::after{
width: 100%;
}
.index-module--flexcont--E5tVn{
position: relative;
display: flex;
flex-wrap: wrap;
gap: 2em;
margin-left: 10%;
margin-right: 10%;
flex-wrap: wrap;
}
.index-module--flexcont--E5tVn article{
margin: 1em;
flex: 1 1 20rem;
box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.66);
border-bottom: 5px solid #C4F0C4;
border-radius: 0px 0px 25px 25px;
transition-property: all;
transition-duration: 0.3s ;
transition-timing-function: ease;
}
.index-module--under--t50Wv{
width: 100%;
font-size: 1em;
color: black;
text-align: center;
font-family: 'M PLUS 1p', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
text-overflow: ellipsis;
overflow: hidden;
line-clamp: 2;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.index-module--flexcont--E5tVn article h2{
text-align: center;
margin-top: 12.5px;
margin-bottom: 5px;
font-family: 'Heebo', sans-serif;
font-weight: 800;
padding-left: 10px;
padding-right: 10px;
letter-spacing: 1.5px;
}
.index-module--flexcont--E5tVn article a{
text-decoration: none;
color: black;
}
.index-module--showthumb--jLQ1t{
width: 100%;
height: auto;
}
.index-module--flexcont--E5tVn article:hover, .index-module--flexcont--E5tVn article:active{
cursor: pointer;
-webkit-transform: scale(1.15);
transform: scale(1.15);
/*transform: translate(0, -20px);*/
}
#media only screen and (max-width: 992px){
.index-module--flexcont--E5tVn{
gap: 1em;
margin-left: 5%;
margin-right: 5%;
}
.index-module--flexcont--E5tVn article{
flex: 1 1 10rem;
margin: 0.5rem;
}
.index-module--under--t50Wv{
display: none;
}
/*.under p{
margin: 0.5rem, 0;
}*/
.index-module--flexcont--E5tVn article h2{
min-width: 6ch;
line-break: auto;
}
}
.footer-module--wrapper--iAZv8{
background-color: #2F4F4F;
margin-top: 5rem;
padding: 2rem 5%;
border-top: 5px solid #C4F0C4;
border-radius: 15px 15px 0 0;
display: flex;
justify-content: space-between;
}
.footer-module--wrapper--iAZv8 div{
display: flex;
justify-content: end;
}
.footer-module--wrapper--iAZv8 div p{
font-family: 'Karantina', sans-serif;
font-weight: 700;
font-size: 40px;
color: #D4F0AA;
text-align: right;
}
.footer-module--tglogo--fTM1x{
margin: 1rem;
width: 12.5rem;
height: 12.5rem;
}
.slug-module--title--g3-bA{
font-family: 'Heebo', sans-serif;
font-weight: 800;
font-size: 54px;
text-align: center;
}
.slug-module--label--ZZRK6{
font-family: 'Heebo', sans-serif;
font-weight: 400;
font-size: 36px;
text-align: center;
}
.slug-module--main--4LR6u{
display: flex;
height: 25rem;
justify-content: space-between;
margin: 0 3rem;
}
.slug-module--ads--JOrBO{
display: block;
}
.slug-module--main--4LR6u div{
min-width: 30%;
min-height: 15rem;
}
.slug-module--desc--jV-dL{
font-family: 'Miriam Libre', sans-serif;
font-weight: 700;
text-align: center;
font-size: 2rem;
margin: 5rem;
}
.slug-module--desc--jV-dL li{
list-style: none;
}
#media only screen and (max-width: 992px){
.slug-module--ads--JOrBO{
display: none;
}
.slug-module--main--4LR6u{
justify-content: center;
}
.slug-module--main--4LR6u div{
min-width: 100%;
}
}
I would really appreciate any help with the matter as it is mind-boggling.
Thanks!
I figured it out on my own, I think (Seems to work for now at least). I moved all my imports to HTML after checking they're indeed correct. Deleted all the cookies from the site and restarted the development server. Seems to do the trick for now. Hope this helps anyone cause I struggled with it for a bit there!
I tried adding the Paypal smart button to my first project. When the Debit or Credit card button is pressed, the text above it goes through the navbar.
I tried adding additional blank space to the background image, but it did not work.
Is there a way to extend the blank space already made by the Paypal button script?
What can I do to fix it?
Navbar problem
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.4),rgba(4,9,30,0.4)),url(slike/slika\ 2.JPG);
background-position: center;
background-size: 100%;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 500px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 20px;
position: sticky;
}
.nav-links ul li a{
color: #7814ac;
text-decoration: none;
font-size: 30px;
font-family: 'Lora', serif;
}
.nav-links ul li::after{
content: "";
width: 0%;
height: 2px;
background: white;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%;
}
.text-box{
width: 90%;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
margin-top: 200px;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 36px;
color: white;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: white;
border: 1px solid white;
padding: 12px 34px;
font-size: 24px;
background: transparent;
position: relative;
cursor: pointer;
margin-bottom: 5px;
}
.hero-btn:hover{
border: 1px solid #7814ac;
background: #7814ac;
transition: 1s;
}
The problem would appear to be the container in which all that text is located. Perhaps it has a fixed position or height. The black debit/credit card button needs to be rendered in a container that can expand normally. If for some reason you are not able to change the site's CSS to allow this, you can disable the black button with &disable-funding=card. Other buttons will open the PayPal window normally.
I'm trying to make a dropdown menu to my navigation bar but when I hover over the London tab, the dropdown menu is slightly placed to the right. I have no idea as to why this is happening, and I've tried some solutions but they have not been successful.
I dont know how to make the dropdown menu centered so its just below the London tab. Any help or advice would be appriciated!
body {
font-family: Arial;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
background-color: #333;
border-radius: 5px;
transition: 0.2s;
}
.navbar a:hover {
background-color: whitesmoke;
color: black;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
position: relative;
}
.active-dropdown {
color: white;
padding: 14px 20px;
text-decoration: none;
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
background-color: #04AA6D !important;
border-radius: 5px;
transition: 0.2s;
}
.active-dropdown a{
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
border-radius: 5px;
transition: 0.2s;
}
.active-dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 50px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
}
.active-dropdown:hover > .dropdown-sub {
display: flex;
}
.dropdown-option a:hover{
background-color: #abcdef !important;
}
.active-dropdown a:hover {
color: white;
transform: scale(1);
}
<!DOCTYPE html>
<html>
<head>
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<a style="align-self: flex-start" href="#">Paris</a>
<a style="align-self: flex-start" href="#">Tokyo</a>
</div>
The problem is, when position:absolute is used, the default for "right" is not 0.
Source:
What are the default top, left, botton or right values when position:absolute is used?
This should fix the problem:
.active-dropdown > .dropdown-sub {
right: 0px;
}
A very simple solution would be to add this to your code:
.active-dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 50px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
left: 0px; /* add this */
}
At first, you should add left:0px. I recommend using percentages instead. In the future, you do not need to edit again if the size or padding changes.
.active-dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 100%; /* Changed */
left: 0%; /* Changed */
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
}
I'm a fairly new web developer and I came across a problem (part of it may be a lack of understanding) but I'm having an awful time creating a sidebar with HTML or CSS. My website currently looks as follows:
There isn't much here, but my dilemma is simple: I'd like to create a sidebar. Maybe to put recent updates or other important things. Also, it'd be great to know if I'm going to go into a web development job eventually.
Here is the code:
* {
margin: 0;
padding: 0;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg");
background-repeat: no-repeat;
}
.navbar {
width: 100%;
margin-top: 150px;
}
.navbar ul {
text-align: center;
border-top: solid 2px black;
border-left: solid 2px black;
border-right: solid 2px black;
margin-left: 400px;
margin-right: 400px;
background: #444444;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
text-decoration: none;
color: black;
font-size: 30px;
padding-left: 20px;
padding-right: 20px;
color: white;
transition: 0.3s;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar ul li a:hover {
background: #8c8c8c;
}
.body {
background-color: rgba(158, 158, 158, 0.6);
margin-left: 400px;
margin-right: 400px;
border: solid 2px black;
border
}
.body p {
font-size: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 20px;
margin-right: 20px;
line-height: 30px;
font-weight: 600;
}
<div class="navbar">
<ul>
<li>Home
</li>
<li>My Works
</li>
<li>Contact Me
</li>
</ul>
</div>
<div class="body">
<p>(paragraph related stuff)
</p>
</div>
I'm fairly new to Web Development (and programming entirely, really) but I've looked up multiple questions, tried many things, and nothing seemed to work. I decided to post here myself to see if I can get any solutions?
From what I understand, HTML has elements that go one under another. I've never figured out how to get elements to go side by side. This may also help when adding an image and then text beside it!
Thank you if you are able to help me :)
may be this simple sidebar can help :
http://codepen.io/Axeish/pen/GrEdMx
CSS
`
html {
height: 100%;
}
body {
height: 100%;
background-color: #e2e1e0;
overflow: hidden;
}
a, a:focus, a:active {
text-decoration: none;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.card {
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
padding: 20px;
background-color: #fff;
margin-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.center {
width: 400px;
height: 200px;
}
.container {
height: 100%;
margin-left: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
}
.container p {
font-size: 20px;
}
.header {
position: fixed;
left: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 400px;
z-index: 20;
padding-top: 50px;
padding-bottom: 100px;
background-color: white;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 0 6px rgba(0, 0, 0, 0.23);
}
.header .content .logo {
padding: 10px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .content .logo span {
text-transform: uppercase;
text-decoration: none;
font-size: 27px;
font-weight: 200;
color: #212121;
}
.header .content .logo img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.header .content ul.navigation {
list-style: none;
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-pack: distribute;
justify-content: space-around;
padding: 0;
}
.header .content ul.navigation li {
padding: 10px;
cursor: pointer;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.header .content ul.navigation li a {
color: #212121;
}
.header .content ul.navigation li a.active {
text-decoration: underline;
}
.header .content ul.navigation li:hover a {
background-color: #212121;
color: white;
}
`
Check this out.
*, :before, :after {
box-sizing: border-box;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/ca/5d/a4/ca5da4df54f6fc88531cbfff469043b0.jpg");
background-repeat: no-repeat;
}
.unstyled {
list-style: none;
padding: 0;
margin: 0;
}
.unstyled a {
text-decoration: none;
}
.list-inline {
overflow: hidden;
}
.list-inline li {
float: left;
}
.header {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 17.5em;
background: #D13513;
}
.logo {
font: 300 2em "Source Sans Pro", Helvetica, Arial, sans-serif;
text-align: center;
padding: 0;
margin: 0;
}
.logo a {
display: block;
padding: 1em 0;
color: #DFDBD9;
text-decoration: none;
transition: .15s linear color;
}
.main-nav ul {
border-top: solid 1px #3C3735;
}
.main-nav li {
border-bottom: solid 1px #3C3735;
}
.main-nav a {
padding: 1.1em 0;
color: #DFDBD9;
font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
text-align: center;
}
.main-nav a:hover {
color: #fff;
}
.list-hover-slide li {
position: relative;
overflow: hidden;
}
.list-hover-slide a {
display: block;
position: relative;
z-index: 1;
transition: .35s ease color;
}
.list-hover-slide a:before {
content: '';
display: block;
z-index: -1;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
border-right: solid 5px #DF4500;
background: #3C3735;
transition: .35s ease left;
}
.list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<body>
<header class="header" role="banner">
<h1 class="logo">
SideNav
</h1>
<div class="nav-wrap">
<nav class="main-nav" role="navigation">
<ul class="unstyled list-hover-slide">
<li>Home</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</nav>
<script