Develop Reference

JQuery on("click") effect happens but doesn't last after moving mouse

So I'm having the following problem.
On the snippet below you'll see parts of a larger page project I'm creating.
I've a parent DIV that has 2 main children in the form of flex:row - left and right side.
(With lots of sub-divs/classes each, that are not displayed here)
The "Products" button is an element/class that belongs in the "Left Side".
The Image (color in this snippet) is an element/class that belongs in the "Right Side".
When you click on the "Products" button, 2 other buttons appear, and then, when you hover to any of the 3 buttons, the image of the "Right Side" (color) changes accordingly.
What I want is to click on the "All Products" button, and change the image(color) of the "Right Side".
But what happens, is that it changes after I click, but the moment I move my mouse, it changes back.
This doesn't happen when I hover in any of the 3 buttons.
The image changes but it remains the same, wherever I move my mouse, as it should, unless I hover to another button.
I tried some methods but I didn't come up with any solution.
Any ideas, ladies and gentlemen?
$(document).ready(function() {
var btn_state = true
$("#main_pr_btn").on("click", function(){
if (btn_state != false){
btn_state = false;
$("#main_pr_btn").addClass("active");
$("#all_pr_btn").fadeIn(0300);
$("#recipes").fadeIn(0600);
}
else
{
btn_state = true;
$("#main_pr_btn").removeClass("active");
$("#all_pr_btn").fadeOut(0200);
$("#recipes").fadeOut(0400);
}
})
$("#main_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "45px 45px 150px 50px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "white", "background-size": "115%"});
})
$("#all_pr_btn").hover(function(){
$(".right_side_img").css({"box-shadow": "-45px 35px 100px 20px rgb(255, 255, 255)"});
$(".right_side_img").css({"background-color": "red", "background-size": "180%"});
})
$("#recipes").hover(function(){
$(".right_side_img").css({"box-shadow": "0px 0px 150px 50px #80ffcc"});
$(".right_side_img").css({"background-color": "blue", "background-size": "140%"});
})
$("#all_pr_btn").on("click", function(){
$(".right_side_img").css({"background-color": "yellow", "background-size": "140%"});
$(".left_side_first_page").find("#buttons").css({
"visibility": "hidden",
"opacity" : "0",
"transition" : "0.3s ease-in-out"
});
})
})
html {
height: 100%;
}
body {
background-image: linear-gradient(35deg, #073b0e, rgb(2, 17, 54));
font-family: "Aloevera", sans-serif;
background-repeat: no-repeat;
}
.section_1 {
height: 100%;
display: flex;
flex-direction: row;
margin: 5%;
font-family: "Didact Gothic";
}
.section_1 .parent_left_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
justify-content: flex-start;
height: 70vh;
padding: 1vh;
}
.section_1 .parent_left_side .left_side_first_page {
background-color: transparent;
display: flex;
flex-direction: column;
word-break: break-all;
height: 70vh;
justify-content: flex-start;
}
.section_1 .parent_left_side .left_side_first_page #buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 20%;
transition: 0.5s ease-in-out;
z-index: 10;
}
.section_1 .parent_left_side .left_side_first_page #buttons .active button {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #main_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
padding-left: 20px;
padding-right: 20px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #all_pr_btn button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes {
display: none;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 40px;
padding-right: 40px;
font-size: 25px;
font-weight: bold;
background-image: linear-gradient(180deg, #d6ee00, rgb(0, 247, 255));
color: rgb(240, 240, 240);
text-shadow: 2px 2px 2px black;
box-sizing: border-box;
border: solid 0px;
border-radius: 4px;
margin-top: 5vh;
transition: all ease-in-out 0.3s;
}
.section_1 .parent_left_side .left_side_first_page #buttons #recipes button:hover {
box-shadow: 0px 0px 10px 5px rgb(255, 255, 255);
font-size: 24.5px;
}
.section_1 .parent_left_side .left_side_second_page {
background-color: rgb(0, 71, 62);
display: none;
height: 70vh;
width: 100%;
margin-right: 20%;
margin-top: 100%;
align-self: center;
transition: 0.5s ease-in-out;
z-index: 1;
box-sizing: border-box;
border: solid 0px #ffffff;
box-shadow: inset 0px 0px 30px 10px #ffffff, 0px 0px 20px 1px rgb(255, 255, 255);
}
.section_1 .right_side {
flex: 50%;
display: flex;
flex-direction: column;
word-break: break-all;
height: 60vh;
justify-content: flex-start;
align-items: center;
padding: 1vh;
}
.section_1 .right_side .right_side_img {
background-color: white;
height: 55vh;
width: 55vh;
background-size: 115%;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
border-radius: 50%;
box-shadow: 45px 45px 150px 50px rgb(255, 255, 255);
transform: translate3d(0px, 0px, 0px);
transition: 0.5s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link rel="stylesheet" href="../mycss/style.css">
<link href="http://fonts.cdnfonts.com/css/aloevera" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="section_1">
<div class="parent_left_side">
<div class="left_side_first_page">
<div id="buttons">
<div id="main_pr_btn">
<button type="button">
Products
</button>
</div>
<div id="all_pr_btn">
<button type="button">
All Products
</button>
</div>
<div id="recipes">
<button type="button">
Recipes
</button>
</div>
</div>
</div>
<div class="left_side_second_page">
</div>
<div class="right_side">
<div class="right_side_img">
</div>
</div>
</div>
<script src="../myjs/mainpage.js"></script>
</body>
</html>

How do I make the navbar stay within the parent div (hero image) regardless of screen size?

I adjusted it based on my screen size, and I've tried using both relative and absolute positions for .navbar, but when I open it on my laptop the navbar content overflows the parent image, setting overflow to hidden doesn't fix the issue since i want it to stay over the bottom of the image at all times regardless of screen size. Here's the jsfiddle https://jsfiddle.net/Montinyek/4dbf5p9e/1/
body, html {
height: 100%;
margin: 0;
padding:0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(./hero.jpg);
height: 80%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
}
h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.nav-container {
display: inline-block;
position: relative;
top: 87%;
}
.navbar {
overflow: hidden;
height: 100px;
display: inline-flex;
gap: 70px;
align-items: center;
justify-content: center;
width: 99vw;
}
.navbar a.main {
color: #f2f2f2;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #f2f2f2;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
</style>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome</h1></div>
<div class="nav-container">
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div></div>
</div>
</body>
</html>```

I don't know if I understood well your issue, but I made some minor changes and got this result demo
HTML:
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Welcome </h1>
</div>
<div class="navbar">
<a class="main" href="#home">Home</a>
<a class="main" href="#mission">Mission</a>
<a class="main" href="#news">Contact</a>
<div class="dropdown">
<a class="main" href="#news">More<i class="fa fa-caret-down"></i></a>
<div class="dropdown-content">
<a style="color:rgb(238, 92, 92);" class="link" href="./index5.html">Gift</a>
Travel
</div>
</div>
</div>
</div>
CSS:
body,
html {
height: 100vh;
margin: 0;
padding: 0;
font-family: Times, Times New Roman, serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url("https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.technistone.com%2Fen%2Fcolor%2Fstarlight-black&psig=AOvVaw3Ekck4Ncbtpa2vQdYYlN_V&ust=1646455838525000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCID6_o3Uq_YCFQAAAAAdAAAAABAD");
height: 80vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
}
.hero-text {
display: flex;
justify-content: center;
text-align: center;
width: 100%;
color: #f2f2f2;
}
.hero-text h1 {
padding: 80px 60px;
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.navbar {
overflow: hidden;
height: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
max-width: 100vw;
width: 100%;
}
.navbar a.main {
color: black;
padding-left: 47px;
padding-right: 47px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
border-radius: 5px;
text-decoration: none;
font-size: 20px;
margin: 0px;
transition: all 0.3s;
display: block;
}
.navbar a.main:hover {
background-color: #ddd;
transform: scale(1.3);
color: black;
}
.dropdown-content {
visibility: none;
opacity: 0;
pointer-events: none;
position: absolute;
left: 64.6%;
top: 80%;
border-radius: 5px;
background-color: black;
min-width: 160px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px,
rgba(0, 0, 0, 0.22) 0px 10px 10px;
z-index: 1;
transition: all 0.5s;
}
.dropdown-content a {
float: none;
color: #ddd;
padding: 12px;
text-decoration: none;
display: block;
text-align: center;
transition: all 0.5s;
font-size: 1.5rem;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

Javascript / remove hover after click close button

Help me please!
Show me please how can I remove hover effect after click close button on the right corner?
I can’t figure out how to turn off the effect when you click on the close button
Help me please. I just started to learn javascript, I would like for me to solve this problem, so that I can see how you solved it
I'm insert code snippet!
$(".close_help").click(function() {
$('.close_help').removeClass(".product__element");
setInterval(function() {
$('.product__element').addClass('.product__element')
}, 100);
});
// // $(".close-hover").click(function () {
// const resetClose = document.querySelector('.close-hover');
// $(".close-hover").click(function () {
// resetClose.style.display = 'none';
// })
// // $('.product__element').removeClass("product__element");
// // setInterval(function () { $('.product__element').addClass('product__element') }, 500);
// // });
.product__element {
z-index: 9;
background-color: #fbfbfb;
width: 20%;
margin: 2%;
padding: 10px 10px 10px 20px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 5px;
-webkit-transform: translateY(0);
-webkit-transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.prodact_sezon {
content: "";
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 9;
background: rgba(196, 196, 196, 0.4);
}
.close_help {
position: absolute;
top: 4px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.interact:hover .close_help {
display: block;
}
/* .prodact_sezon .product__element:hover {
transform: scale(02);
} */
.product__element:hover {
background-color: white;
transform: scale(1.02);
box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, .09);
z-index: 10;
margin-bottom: 0px;
}
.elem123 {
margin-top: -1px;
margin-bottom: 0px;
display: none;
position: absolute;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .09);
}
.product__element:hover .elem123 {
display: block;
background: #FFFFFF;
left: 0%;
right: 0%;
margin-bottom: 0%;
padding: 20px;
box-shadow: 0px 10px 12px 0 rgba(0, 0, 0, .09);
border-radius: 10px;
}
.product__img {
max-width: 80%;
height: auto;
padding-top: -20px;
}
.product__name {
width: 100%;
padding: 1px 5px 10px 5px;
text-align: center;
font-weight: bold;
}
.product__name__two {
width: 100%;
font-size: 15px;
padding: 0px 5px 7px 5px;
text-align: center;
font-weight: regular;
}
.product__description {
width: 100%;
font-size: 14px;
padding: 10px 2px 2px 2px;
text-align: center;
font-weight: regular;
text-rendering: auto;
}
.product__price {
text-align: center;
padding: 10px 5px;
/* border: 1px solid #e2e2e2; */
border-radius: 10px;
margin-bottom: 0px;
color: #edaf26;
font-weight: bold;
z-index: 330;
font-size: 17px;
}
.product__size {
display: flex;
align-items: center;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
.product__size-element {
width: 48%;
border: 2px solid #e2e2e2;
font-size: 14px;
padding: 5px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
margin-bottom: 0px;
border-radius: 10px;
}
.product__size-element_active {
border: 3px solid #76AA6F !important;
border-radius: 10px;
}
.product__add-to-cart-button {
width: 100%;
height: 45px;
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;
border: none;
-webkit-appearance: none;
border-radius: 10px;
background: #76AA6F;
color: #fff;
cursor: pointer;
margin: 15px 0 0;
-webkit-transition: .3s;
transition: .3s;
font-size: 16px;
outline: none;
}
.product__add-to-cart-button:hover {
background: #63915D;
-webkit-transition: .3s;
transition: .3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product__element interact">
<span class="close_help">×</span>
<img alt="Манго Махачонок" class="product__img" src="https://unsplash.com/photos/7iLlgS5o09c">
<div class="product__name">
Манго Махачонок
</div>
<div class="product__price">
<span class="product__price-number">220</span> Грн
</div>
<div class="elem123">
<div class="product__size">
<div class="product__size-element" data-sb-curent-id-or-vendor-code="003" data-sb-curent-price="220" data-sb-curent-size="1 шт.">
1 шт.
</div>
<div class="product__size-element" data-sb-curent-id-or-vendor-code="004" data-sb-curent-price="190" data-sb-curent-size="1 кг">
1 кг.
</div>
</div>
<div class="product__quantity"></div><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="003" data-sb-product-img="images/shop/2-min.png" data-sb-product-name="Манго Махачонок" data-sb-product-price="220" data-sb-product-quantity="003" data-sb-product-size="1 шт."><i class="fas fa-cart-plus"></i> В корзину</button>
<div class="product__description">
По вкусовым качествам Mango Махачонок идет на первом месте среди всех тайских сортов. У него самая не волокнистая мякоть. Он самый сладкий.
</div>
</div>
</div>

While mentioning the class in any of these functions(addClass() or removeClass()) you do not start it with . because these functions are all about classes and you just need to specify them.
And to turn off the hover, change your jQuery code to
$(".close_help").click(function() {
$('div').removeClass("product__element");
setInterval(function() {
$('div').addClass('product__element')
}, 1000);
});
Here is the working example of how it works.

Jquery UI Drag Drop How to Add an Information Message?

I'm doing a project with the Jquery UI Drag Drop library. But when I try to add an information message, the message can be resumed. When I try to do the insertion process, I encounter difficulties.
I want to add the message differently for each of the 2 boxes.
How do I add a drag and drop message?
Desired Output: https://i.stack.imgur.com/eBqi4.gif
CODES: https://jsfiddle.net/bw5ky9r7/
$(document).ready(function(){
$("#deactive-cards").droppable({
accept: "#active-cards > div",
});
$("#active-cards").droppable({
accept: "#deactive-cards > div",
});
$("#deactive-cards, #active-cards").sortable({
placeholder: "",
connectWith: ".flex-container",
containment: "#maximum-drag",
revert: true,
scroll: false,
receive: function(event, ui) {
$("#active-cards-count").text($("#active-cards").find("div").length);
}
});
});
.flex-container {
text-align: center;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 5px 10px;
min-height: 115px;
overflow: hidden;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.23) 0px 0px 5px 0px inset;
background: rgb(249, 249, 249);
padding: 15px 5px;
border: 2px solid transparent;
}
.flex-container>div {
cursor: all-scroll;
margin: 3px 2px;
text-align: center;
flex-direction: row;
height: 77px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border-bottom-width: 3px;
padding: 10px;
max-width: 92px;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
position: relative;
}
.flex-container>div>img {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.title-box {
padding: 10px;
position: relative;
}
.title-box h5 {
text-transform: uppercase;
color: #11acbe;
font-size: 17px;
font-weight: 500;
display: inline-block;
margin-right: 10px;
line-height: 1.1;
position: relative;
margin-bottom: 13px;
padding-left: 5px;
}
.title-box h5:before {
top: -5px;
margin-bottom: 0;
content: '';
background-color: #11acbe;
width: 3px;
height: 30px;
position: absolute;
left: -10px;
}
.ui-droppable-active {
box-shadow: none !important;
background-image: radial-gradient(circle, rgba(237, 253, 255, 0.07), rgba(0, 205, 231, 0.1), rgba(0, 188, 212, 0.1), rgba(0, 188, 212, 0.15)) !important;
border: 2px dashed #00bcd4 !important;
}
.ui-sortable-helper:before {
content: " ";
border: 2px solid #00bcd4;
background-image: radial-gradient(circle, rgba(237, 253, 255, 0.07), rgba(0, 205, 231, 0.1), rgba(0, 188, 212, 0.1), rgba(0, 188, 212, 0.15));
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="col-lg-12" id="maximum-drag">
<div class="title-box">
<h5>ACTIVE DISPLAY CARDS (<span id="active-cards-count">0</span>)</h5>
<div style="font-size: 14px;color: #6e6e6e;">It is a list of your display cards that are active on the server.</div>
</div>
<div class="flex-container" id="active-cards">
</div>
<div class="title-box">
<h5>YOUR DISPLAY CARDS</h5>
<div style="font-size: 14px;color: #6e6e6e;">List of display cards you can use.</div>
</div>
<div class="flex-container" id="deactive-cards">
<div id="item-1"><img src="https://svgur.com/i/D1R.svg" style="width: 90%"></div>
</div>
</div>

#active-cards:empty:before{
content: "Drag and drop the display cards you want to use here.";
padding: 15px;
text-shadow: 0px 1px 0px #ffffff;
}
#deactive-cards:empty:before{
content: "All your display cards are being used.";
padding: 15px;
text-shadow: 0px 1px 0px #ffffff;
}

CSS: Navigation Bar

Building a website for my company, first one. And I’m having trouble getting the navigation bar to be horizontal, and placed in the top right corner of the browser.
The whole top section is a <div> (similar to the StackExchange site), and I currently have three elements floating to the top left (logo, name, tagline).
I’m trying to get the navigation bar horizontal and floating to the right, except I can’t locate it there. It keeps appearing outside of the black bar, and beneath the three left floating elements.
HTML code:
<div class="part1 header">
<div class="headcontain">
<a href="http://www.se7enservice.com">
<div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
<div class="headtag"><img src="/Images/title.png"</div>
<div class="tagline"><img src="/Images/tag_line.png"/></div>
</a>
<!-- <div class="bif">
<div class="bif2">
<div id="p1" class="block"></div>
<div id="p2" class="block"></div>
</div>
</div> -->
<ul class="navi">
<li>Home</li>
<li><a href="/about.html" >About</a></li>
<li><a href="/services.html" >Services</a></li>
<li><a href="/pricing.html" >Pricing</a></li>
<li><a href="/contact_us.html" >Contact Us</a></li>
</ul>
</div>
</div>
CSS code for the three left floating elements and the navigation thus far:
.part1 {
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo {
width: 50px;
height: 50px;
float: left;
overflow: visible
}
.logo img {
width: 100%;
padding: 1.5px
}
.headtag {
padding: 0px 10px;
width: 215px;
float: left
}
.headtag img {
width: 100%;
height: 50px
}
.tagline {
width: 220px;
float: left;
margin: -50px 0px 0px 220px;
}
.tagline img {
width: 100%
}
navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}
.navi li {
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}
Any help would be greatly appreciated. It’s completely frustrating. If you would like reference as to what I’m trying to do, refer to http://johnnycupcakes.com/.

Style your li so they are display:inline;. They will sit side by side. Also you need to remove your float:left on the li;
.navi li{
display: block;
position: relative;
/*float: left;*/
margin: 0px 5px;
overflow: hidden;
display:inline;
}
You were also missing a closing tag on your img;
<div class="part1 header">
<div class="headcontain">
<a href="http://www.se7enservice.com">
<div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
<div class="headtag"><img src="/Images/title.png"/></div><!--Closed image tag-->
<div class="tagline"><img src="/Images/tag_line.png"/></div>
</a>

The line <div class="headtag"><img src="/Images/title.png"</div> has to be changed to
<div class="headtag"><img src="/Images/title.png"/></div> you forgot to close off the image tag.
as well as this, change your css to the following:
.part1{
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo,.headtag,.tagline{
display:inline-block;
background-color:green;
}
.logo {
width: 50px;
height: 50px;
float: right;
overflow: visible;
}
.logo img {
width: 100%;
padding: 1.5px
}
.headtag {
padding: 0px 10px;
width: 215px;
float: right;
}
.headtag img {
width: 100%;
}
.tagline {
width: 220px;
float: right;
}
.tagline img {
width: 100%
}
navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}
.navi li{
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}
Have a look at this fiddle

This should do the trick... let me know if this is what your looking for.
//HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body>
<nav>
<div>
<div id="logo">LOGO</div>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact_us.html" >Contact Us</a>
</div>
<div>
Sign Up
Sign In
</div>
</nav>
<section id="content"></section>
<footer></footer>
</body>
</html>
//CSS
body{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
margin: 0 !important;
height: 100vh;
width: 100vw;
overflow: scroll;
}
nav{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 60px;
z-index: 999;
position: fixed;
background: #1E67CB;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
text-align: center;
-webkit-flex: 1;
flex: 1;
-webkit-align-self: center;
align-self: center;
}
#logo{
display: -webkit-flex;
display: flex;
cursor: default;
-webkit-align-self: center;
align-self: center;
margin-left: 1em;
color: #fff;
font-weight: bold;
font-size: 1.15em;
line-height: 1.43;
-webkit-font-smoothing: antialiased;
font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
width: 50vw;
display: -webkit-flex;
display: flex;
}
nav>div:nth-of-type(1){
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
nav>div:nth-of-type(2){
-webkit-justify-content: center;
justify-content: center;
}
nav>div:nth-of-type(3){
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
nav>div>a{
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
text-decoration: none;
cursor: pointer;
color: #fff;
font-size: 1em;
font-weight: 300;
-webkit-font-smoothing: antialiased;
font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
margin: 0 .5em;
padding: 0.6em 1.5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: background-color 100ms;
-webkit-transition: background-color 100ms;
transition: background-color 100ms;
}
nav>div>a:hover{
background: rgba(255,255,255,0.15);
}
nav>div>a:active{
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
background: rgba(255, 255, 255, 0.15);
}
nav>div>a:nth-of-type(2):hover{
background: rgba(255, 255, 255, 0.37);
}
#content{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 200vh;
}
footer{
display: -webkit-flex;
display: flex;
width: 100%;
min-height: 100px;
bottom: 0;
background: #5c5c5c;
box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}