I am having some trouble with a menu in Elementor. Please see this page: https://boys-cry.com/ On the first 2 menu items, 'We' and 'Clients' I have set up a popup of text to appear under the menu when each is clicked. However when one is clicked, you can't click on a different one without 'closing the popup' first by click away underneath the text to close that popup and then the menu becomes clickable again.
The desired outcome I am trying to achieve is like the menu on this page: https://www.am-production.co.uk/ where the text appears underneath each menu item that expands when clicked. Any ideas on some help for a method or plugin to achieve this please?
Thank you!
Code of the logo/menu button:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
color: #00000000;
padding: 40px 12px 40px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
.dropbtn:hover {
color: #00000000;
padding: 40px 12px 40px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
.dropbtn:focus {
color: #00000000;
padding: 40px 12px 40px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
outline: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00000000;
min-width: 180px;
z-index: 1;
margin-top: 20px;
margin-left: 18px;
}
.dropdown-content a {
color: black;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
padding: 2px 2px;
text-decoration: none;
display: block;
}
hr.solid {
border-left: none;
border-right: none;
border-top: 1px solid #000000;
border-bottom: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<hr class="solid">
WE
<hr class="solid">
CLIENTS
<hr class="solid">
GET IN TOUCH
<hr class="solid">
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
I have change some CSS .. you may apply it and get your desire result..
.elementor-469 .elementor-element.elementor-element-148ab54 {
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
margin-top: unset !important;
margin-bottom: 0px;
padding: 0px 0px 0px 10px;
z-index: 0;
position: absolute !important;
top: 220px !important;
width: 100% !important;
}
Thanks & Enjoy
Related
I have written some code that I want to apply to the site logo.
Please see below the full code script that includes html CSS and JavaScript. If you go to this page you can see that code in action on the second rotating logo: https://lutodigital.com/test2/
Please could you help me with what I'd need to do to apply this code to the site logo? Essentially turning the logo into a dropbutton with extras and adding the rotation to it so the site logo behaves in the same way that the below set of code does.
Thank you very much!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:hover {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:focus {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.panel {
color: black;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #00000000;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 12px!important;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 0px 0px 0px 10px;
margin: 0px 0px 0px 11px;
}
.link {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
.link:hover {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
hr.solid {
border-left: none;
border-right: none;
border-top: 1px solid #000000;
border-bottom: none;
max-width: 200px;
margin-left: 15px;
padding-top: 5px;
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
.dropbtn:hover {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
.dropbtn:focus {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
outline: none;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
#keyframes logo {
from {width: 125px; height: 125px; transform: rotate(0deg)}
to {width: 125px; height: 125px; transform: rotate(360deg);}
}
#myDropdown > div {
display: none
}
#myDropdown.show > div {
display: block
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Luto Digital:</button>
<div id="myDropdown">
<div>
<hr class="solid">
<div class="accordion-div">
<button class="accordion"><span class="faq__question-heading">About</span></button>
<div class="panel">
<p style="padding:18px 0;">We are the decisive factor behind your digital growth & success.<br><br>In a world of change overwhelmed with opinion, we can't be everything to everyone, but we can be everything to someone. We don't compromise on what really matters.<br><br>We deliver value through collaboration.</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Services</span></button>
<div class="panel">
<p style="padding:18px 0;">Digital Marketing . Strategic Thinking & Digital Consultancy . Website Design & Development . Omnichannel Execution . Video Content Creation & Editing . Behind The Scenes Video Editing . Destination Video Editing . SEO Services . Email Marketing . Social Content Strategy . Social Media Management . Content Marketing . Market Research . User Behaviour & Competitor Analysis . PPC Advert Management . Digital Audits . Data, Insights & Analytics</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Clients</span></button>
<div class="panel">
<p style="padding:18px 0;">WPJ Heating . Dove Men+Care . Collaborative Creations . Off The Wall Prints . Unilever . CompareCaribbean.com . Vision Salons . Boof Tennis . TRESemmé . Clipfix . Fit Within . Knorr . 31 Salon . Cindarella . Magnum . Wowo Campsite . Eastside Primetimers . AMP Agency . Boys Cry</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Reviews</span></button>
<div class="panel">
<p style="padding:18px 0;"></p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:hello#lutodigital.com">Talk to Us</a></span></button>
<div class="panel"></div>
</div>
<hr class="solid">
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)
I added a dropdown button with a down arrow (image) with the help of https://www.w3schools.com/howto/howto_js_dropdown.asp. However, after adding the down arrow image, the image area of the button cannot be clicked? Not quite sure what went wrong here, the button is still functional.
HTML:
<html>
<head>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}</script>
</head>
<body>
<!-- dropdown feature -->
<div class="dropdown">
<button onclick="dropdownMenu()" class="dropbtn">User
<!--image cant be clicked???-->
<img src="images.png" style="height:8px; width:10px; margin-bottom: 2px; margin-left: 5px;">
</button>
<!-- dropdown content -->
<div id="myDropdown" class="dropdown-content">
Profile
Settings
Logout
</div>
</div>
</body>
</html>
CSS:
.dropbtn {
background-color: white;
color: black;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer;
position: absolute;
top: -69.5px;
left: 1280px;
border-radius: 4px;
width: 90px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: rgb(218, 218, 218);
}
.dropdown {
position: absolute;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: -20px;
left: 1210px;
background-color: #f1f1f1;
min-width: 164px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 6px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
Can someone please help identify what is the error here? Thanks a lot!
Just add the pointer-events: none css property to the i tag element:
.fa {
pointer-events: none;
}
to prevent any pointer events for the <i> tag
Live Demo: CodePen
I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.
Keeping this effect, is there a way to do the following:
To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)
Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do
.help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.
The sprites I'm going to using for the background/icons are in the form of:
{url(../theme/images/top_sprites.png) no-repeat -2px 0;}
So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help</a>
<a class="logout" href="#" onclick="openLogout();">Logout</a>
</div>
</div>
You could animate a pseudoelement on the anchor.
Example:
.header {
min-height: 50px;
background-color: #008b10;
}
.menu {
padding: 0 16px;
font-family: Raleway, arial, sans-serif;
border: 1px solid blue;
}
.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
padding: 16px 5px;
display: inline-flex;
align-items: center;
flex-direction: column;
position: relative;
}
.menu a span {
position: relative;
}
.menu a:before {
transition: 0.4s;
content: '';
display: block;
position: absolute;
background: white;
opacity: 0;
transform: scaleY(.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.menu a:hover:before {
transform: scaleY(1);
opacity: 1;
}
.menu a img {
max-width: 15px;
display: block;
position: relative;
padding-bottom: 4px;
}
.menu a:hover {
color: #008b10;
}
<div class=header>
<div class="menu">
<a href="#">
<img src="https://unsplash.it/15">
<span>Help</span>
</a>
<a href="#">
<img src="https://unsplash.it/15">
<span>Logout</span>
</a>
</div>
</div>
.header {
height: 50px;
background-color: #008b10;
}
.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}
.menu a:hover {
background-color: #ffffff;
color: #008b10;
padding: 16px 5px;
}
.menu a {
/*box-sizing: border-box;*/
/*float:left*/
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 13px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class=header>
<div class="menu">
<a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>
</a>
<a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>
---CSS---
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0, 1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1, 1);
}
a.focused .a-border::after {
transform: none;
}
---JS---
function menuclick(underline) {
var focused = document.getElementsByClassName("focused");
var i;
for (i = 0; i < focused.length; i++) {
var under = focused[i];
if (under.classList.contains('focused')) {
under.classList.remove('focused');
}
}
if (!underline.parentElement.classList.contains('focused')) {
underline.parentElement.classList.add('focused');
}
}
---HTML---
<span class="a-border" onclick="menuclick(this)">ABOUT US</span>
<span class="a-border" onclick="menuclick(this)">CREATERS</span>
<span class="a-border" onclick="menuclick(this)">NEWS</span>
<span class="a-border" onclick="menuclick(this)">CONTACT</span>
Just like this http://www.w3schools.com/html/default.asp "HTML HOME" button color is green because that's the active link.
So how to do the same on my website?
My HTML code:
<!-- Website fixed header-->
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><div class="hoverwebsite">Website Name</div></button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
My CSS:
/* Top header orange color */
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a:active {
background-color: yellow;
}
</style>
Here is my JSFiddle. Let me know if you need more details.
Add class="active" in the anchor tag which you want to keep active
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
height:38px;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a{
height:38px;
display:block;
padding-top:16px;}
a.active {
background-color: #4CAF50;
color: #f2f2f2;
}
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website">Website Name</button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
</div>
EDIT 1:
Have this js code in the page where you want anchor tag to remain active. I have removed active class from anchor tag in html code. Have script reference to jquery library too.
JS:
$(document).ready(function() {
$('#website').addClass('active');
});
EDIT 2:
You possibly can't deal with margins in button, make button position absolute instead of fixed and align them using top, left, right, bottom css properties
.dropbtn.website {
top:0px;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
position:absolute;
left:10px;
width:150px;
}
.dropdown.website {
Top:43px;
position: fixed;
display: inline-block;
margin-right:10px;
}
Codepen
Use this css to see how it can be aligned.
EDIT 3:
Use this in your index file
<script>
$(document).ready(function() {
$('#website').addClass('active');
if($('#website2').hasClass('active'))
$('#website2').removeClass('active');
});
</script>
and this script in your yooo.html file
<script>
$(document).ready(function() {
if($('#website').hasClass('active'))
$('#website').removeClass('active');
$('#website2').addClass('active');
});
</script>
Also check the updated html i have changed the id of second anchor tag to website2