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%;
}
Related
I would like to move the navigation buttons a little bit to the left and separate it from the last button which's Sign Up, at the same time, I need to move the logo a little bit to the right.
body {
margin: 0;
}
header {
background-color: rgb(212, 209, 209);
display: flex;
flex-wrap: wrap;
/* so navbar will go under logo on small smartphones */
align-items: baseline;
padding: 0.5rem;
justify-content: space-between;
}
.logo {
width: 100px;
margin-top: 16px;
cursor: pointer;
}
.nav {
display: flex;
gap: 1rem;
padding: 0;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.link:hover {
color: black;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
}
#signup {
padding: 10px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
<header>
<img class="logo" src="images/new logo.png" alt="logo">
<nav class="nav">
<div class="dropdown">
<button class="link">Information</button>
<div class="dropdown-menu">Dropdown Content</div>
</div>
Pricing
<button class="link">Login</button>
<button class="link" id="signup">Sign Up</button>
</nav>
</header>
Just add a margin-left to your logo to move it more to the right. If you want more space between the last button and the rest of the content you can also add a margin-left to the .link:last-child If you want elements to space apart then use margin. margin: auto will distribute all remaining space within flexbox and css-grid (just as a side note for the future):
.logo {
margin-left: 25px;
}
.link:last-child {
margin-left: 30px;
}
/* original CSS */
body {
margin: 0;
}
header {
background-color: rgb(212, 209, 209);
display: flex;
flex-wrap: wrap;
/* so navbar will go under logo on small smartphones */
align-items: baseline;
padding: 0.5rem;
justify-content: space-between;
}
.logo {
width: 100px;
margin-top: 16px;
cursor: pointer;
}
.nav {
display: flex;
gap: 1rem;
padding: 0;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.link:hover {
color: black;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
}
#signup {
padding: 10px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
<header>
<img class="logo" src="images/new logo.png" alt="logo">
<nav class="nav">
<div class="dropdown">
<button class="link">Information</button>
<div class="dropdown-menu">Dropdown Content</div>
</div>
Pricing
<button class="link">Login</button>
<button class="link" id="signup">Sign Up</button>
</nav>
</header>
body {
margin: 0;
}
header {
background-color: rgb(212, 209, 209);
display: flex;
flex-wrap: wrap; /* so navbar will go under logo on small smartphones */
align-items: inherit;
padding: 15px 4%;
justify-content: space-between;
}
.logo {
margin-left: 20px;
cursor: pointer;
}
.nav {
display: flex;
gap: 1rem;
padding: 0;
}
.link {
background: none;
border: none;
text-decoration: none;
color: #777;
font-family: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
}
.link:hover {
color: black;
}
.link:last-child {
margin: auto;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
}
#signup {
padding: 10px 25px;
background-color: rgba(0,136,169,1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
If you want to move the logo to the right and signup to the left seperated from other navigation buttons then since its the first and last child, just use:
header:first-child{
float: right;
}
header:last-child{
float: left;
}
To adjust the middle buttons, just give a little bit of margin to position it correctly
give them all a little bit of margin in your css file. That's all I can tell you without seeing your CSS file
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.
Hello could someone please tell me why my menu does not go from page to page.
Dropdown works but when I click it doesn't go to the subpage. Anticipating the question, I don't want to use JavaScript. Buttons without dropdown menu works. If this cannot be fixed, could someone sent me a menu in similar style without JavaScript.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #333;
}
hr {
border-top: 2px dashed white;
border-bottom: none;
}
a {
text-decoration: none;
color: black;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navbar {
height: 6vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 60%;
margin: auto;
}
.dropdown {
position: relative;
}
.dropdown ul {
position: absolute;
background: #bebebe;
margin-top: 10px;
width: 200px;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.6s ease;
left: 0px;
}
.dropdown li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown li:hover {
background-color: darkslategray;
}
.navbar button,
.deco {
background: none;
border: none;
color: black;
text-decoration: none;
font-size: 18px;
cursor: pointer;
}
.navbar button:hover,
.deco:hover {
color: darkslategray;
}
.dropdown button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
.top {
text-decoration: none;
background: yellow;
border: none;
color: black;
font-size: 48px;
cursor: pointer;
border-radius: 5px;
width: 45px;
height: 45px;
align-items: center;
right: 0;
bottom: 0;
position: fixed;
}
.autor {
color: #bebebe;
font-size: 16px;
}
.printButton {
border: none;
font-size: 18px;
border-radius: 5px;
width: 80px;
height: 20px;
cursor: pointer;
color: black;
background: darkslategray;
}
#media print {
.noPrint {
display: none;
}
}
<header class="noPrint">
<img src="https://via.placeholder.com/80" alt="Logo strony" class="center">
<div class="navbar">
<button>Główna</button>
<div class="dropdown">
<button>Ciasta</button>
<ul>
<li>Biszkopt</li>
<li>Beza</li>
<li>Makowiec</li>
</ul>
</div>
<div class="dropdown">
<button>Pieczywo</button>
<ul>
<li>Chleb</li>
<li>Bułki</li>
<li>Bułki na słodko</li>
</ul>
</div>
<button>Informacje</button>
</div>
</header>
Instead of using a button, I used input of type checkbox to style the dropdown when its open and remove the style when its closed. button won't work because they require either JavaScript to add functions or be inside a form element (to act as a submit button which is not what you want here).
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > .dropdown-text {
padding: 10px 20px;
}
.dropdown > input {
top: 0;
opacity: 0;
margin: 0;
position: absolute;
height: 100%;
width: 100%;
cursor: pointer;
}
.dropdown > input:checked + .dropdown-container {
transform: scaleY(1);
}
.dropdown > .dropdown-container {
transform: scaleY(0);
width: 100%;
background-color: #ffffff;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
position: absolute;
}
.dropdown > .dropdown-container > a {
display: block;
text-decoration: none;
padding: 10px;
background-color: #ffffff;
color: #000000;
}
<div class="dropdown">
<div class="dropdown-text">THIS IS A DROPDOWN</div>
<input type="checkbox">
<div class="dropdown-container">
Item 1
Item 2
Item 3
</div>
</div>
So I have this problem, I have Static web page, and i have header section and few others.
But currently right now. Whatever section i set to be under the header section, its just move over the header.
This is first time this is happening, and i cant reslove it.
On first i tought its problem in browser, but it is same on every one that i tried.
I think it is problem in the image on header section so i placed it above the txt section on the header, but section below header stil overlaps on the header.
Soo I double checked all code on header and I think there was nothing wrong that
could cause this.
header {
margin: auto;
height: 100vh;
}
.navigation-menu {
z-index: 10000;
display: flex;
align-items: center;
background: #fff;
box-shadow: 0 1px 1px #333;
justify-content: space-between;
position: fixed;
width: 100%;
left: 0;
top: 0;
padding: 20px 20px;
}
.navigation-menu nav ul {
word-spacing: 10px;
}
.navigation-menu nav ul li {
list-style-type: none;
display: inline-block;
}
.navigation-menu nav ul li a {
font-size: 19px;
}
/*
===== Hamburger Menu =====
*/
.navigation-menu .hamburger {
padding: 5px;
position: relative;
display: none;
cursor: pointer;
right: 40px;
border: none;
background: none;
outline: none;
appearance: none;
}
.navigation-menu .hamburger .bar {
transition: .3s ease all;
position: relative;
display: block;
margin-bottom: 5px;
width: 30px;
height: 3px;
background: #333;
border-radius: 26px;
}
.hamburger.is-active .bar:nth-last-child(1) {
transform: rotate(-45deg) translate(4px, -5px);
}
.hamburger.is-active .bar:nth-last-child(2) {
transform: translateX(-10px);
opacity: 0;
}
.hamburger.is-active .bar:nth-last-child(3) {
transform: rotate(45deg) translate(6px, 8px);
}
.mobile-menu {
transition: .3s ease all;
transform: translateX(100%);
position: fixed;
display: none;
align-items: center;
justify-content: space-around;
left: 0;
top: 0;
width: 100%;
padding-top: 120px;
height: 100vh;
z-index: 2;
background: #fff;
}
.mobile-menu.menu-show {
transform: translateX(0%);
}
.mobile-menu ul {
word-spacing: 10px;
}
.mobile-menu ul li {
list-style-type: none;
}
.mobile-menu ul li a {
font-family: 'Playfair Display', serif;
margin-bottom: 5px;
transition: .3s ease all;
font-size: 45px;
}
.mobile-menu ul li a:hover {
color: red;
}
#media (max-width:533px) {
.navigation-menu nav {
display: none;
}
.navigation-menu .hamburger {
display: block;
}
.mobile-menu {
display: flex;
}
}
/*
===== Hamburger Menu =====
*/
.heading__container {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.heading__content {
position: relative;
margin: 6%;
display: block;
}
.heading__title h1{
font-weight: 900;
text-transform: uppercase;
font-size: 55px;
}
.heading__title h1 span {
color: red;
}
.heading__subtitle p{
font-size: 22px;
}
.heading__subtitle {
max-width: 600px;
width: 100%;
}
.heading__image {
padding: 1em;
position: relative;
text-align: center;
}
.heading__image img {
max-width: 400px;
width: 100%;
}
.heading__button-box .btn__read {
background: red;
border: solid 1px red;
}
.heading__button-box .btn__read a {
color: #fff;
}
.heading__button-box .btn__react {
position: relative;
}
.heading__button-box .btn__react::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
background: red;
z-index: -1;
height: 0;
transition: .3s ease all;
width: 100%;
}
.heading__button-box .btn__react:hover::before {
height: 100%;
}
.heading__button-box button {
margin-bottom: 1%;
margin-right: 5%;
}
.heading__button-box .btn__react a {
transition: .3s ease all;
}
.heading__button-box .btn__react:hover {
border: solid 1px red;
}
.heading__button-box .btn__react:hover a {
color: #fff;
}
.heading__button-box .btn__react {
border: solid 1px red;
}
.h__wrapper {
margin-top: 50px;
}
.h__wrapper .h__button {
display: inline-block;
overflow: hidden;
height: 60px;
width: 60px;
float: left;
border-radius: 50px;
cursor: pointer;
margin: 10px 5px;
transition: .3s ease all;
box-shadow: 0 2px 12px #333;
}
.h__wrapper .h__button:hover {
width: 200px;
}
.h__wrapper .h__button .icon {
height: 60px;
width: 60px;
transition: .3s ease all;
border-radius: 50px;
text-align: center;
line-height: 60px;
box-sizing: border-box;
display: inline-block;
}
.h__wrapper .h__button .icon i {
font-size: 25px;
line-height: 60px;
}
.h__wrapper .h__button span {
font-size: 20px;
line-height: 60px;
margin-left: 10px;
font-weight: 500;
}
.h__wrapper .h__button:nth-child(1) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(1):hover .icon {
background: rgb(126, 168, 245);
}
.h__wrapper .h__button:nth-child(1):hover .icon i{
color: #fff;
}
.h__wrapper .h__button:nth-child(2) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(2):hover .icon {
background: rgb(214, 146, 20);
}
.h__wrapper .h__button:nth-child(2):hover .icon i{
color: #fff;
}
.h__wrapper .h__button:nth-child(3) .icon {
background: #fff;
}
.h__wrapper .h__button:nth-child(3):hover .icon {
background: #333;
}
.h__wrapper .h__button:nth-child(3):hover .icon i{
color: #fff;
}
<header>
<div class="navigation-menu">
<img src="../assets/images/logo/Anima.png" alt="">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Works</li>
<li>Projects</li>
</ul>
</nav>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
<nav class="mobile-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>Projects</li>
</ul>
</nav>
<section class="heading__container">
<div class="heading__content">
<div class="heading__title">
<h1><span>Emanuel</span> <br> Rajic</h1>
</div>
<div class="heading__subtitle">
<p>I am 16 years old Front-end developer and CS Student</p>
</div>
<div class="heading__button-box">
<button class="btn__read">Read More</button>
<button class="btn__contact btn__react">Get In Touch</button>
</div>
<div class="h__wrapper">
<div class="h__button">
<div class="icon"><i class="fab fa-twitter"></i></div>
<span>Twitter</span>
</div>
<div class="h__button">
<div class="icon"><i class="fab fa-instagram"></i></div>
<span>Instagram</span>
</div>
<div class="h__button">
<div class="icon"><i class="fab fa-github"></i></div>
<span>Github</span>
</div>
</div>
</div>
<div class="heading__image">
<img src="../assets/images/header/valentin-salja-0aX51h4WvAk-unsplash.jpg">
</div>
</section>
</header>
A combination of z-index:10000, which will give this element priority over everything (so being on top all the time), and position:fixed, which will make that element have a fixed position in the said place no matter the scrolling are, the culprits. Removing those two CSS properties would fix your "issue".
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result: