The navbar's appears to not cover entire screen in mobile mode

The navbar's appears to not cover entire screen in mobile mode - javascript

My navbar works just fine in desktop mode. But when I decrease the screen resolution, its starts not covering the entire width of the window. Can you help me to make it cover the whole width of screen.
MY home.html file
var ser = document.getElementById('in');
document.getElementById('in').onkeypress = function(e) {
if (e.keyCode == 13) {
console.log("ent")
var value = document.getElementById('in').value;
var search = "example";
console.log(value)
window.open("result.html", "_self");
sessionStorage.setItem("search", value);
}
}
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const item = document.querySelector(".item");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
//hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
const navLink = document.querySelectorAll(".nav-link");
navLink.forEach(n => n.addEventListener("click", closeMenu));
function closeMenu() {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}
var width = screen.width;
var height = screen.height;
var tempo = document.getElementById("tempo");
var ser = document.getElementById("ser");
if (width < 650) {
tempo.remove();
ser.remove();
navMenu.setAttribute('width', '100%')
}
* {
margin: 0px;
background-color: white;
}
.navbar {
background-color: blue;
width: 100%;
height: 50px;
}
.navbar-container {
display: flex;
align-items: center;
background-color: black;
height: 100%;
}
.item {
padding: 0 20px;
background-color: black;
color: white;
text-decoration: solid;
}
.search_box_item {
padding: 0 0 0 400px;
width: 500px;
}
.p1 {
float: right;
}
.pm {
font-family: 'Courier New', Courier, monospace;
color: aquamarine;
font-size: 5vw;
background-color: transparent;
width: 3vw;
margin: 10px 10px;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%
}
.nav-items {
list-style-type: none;
}
#in {
border-radius: 25px;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
#media only screen and (max-width: 767px) {
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 1vw;
width: 1vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
#media only screen and (max-width: 480px) and (min-width: 320px) {
.navbar {
height: 30vw;
}
.navbar {
height: 20vw;
width: 100%;
}
.logo {
height: 10vw
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
}
#media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.navbar-container {
align-items: center;
background-color: black;
height: 100%;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
width: 100%;
}
.temp {
visibility: collapse;
}
.navbar {
height: 20vw;
width: 100%;
}
}
.nav-menu {
background-color: black;
width: 100%;
height: 40%;
margin-top: 0px;
}
<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
<div class="navbar flex-row" style="width: 100%;">
<nav class="navbar-container navbar" style="width: 100%;">
<div class="navbar-logo item"><img class="logo" src="images/Navlab.png" style="width:3vw"></div>
<div class="search_box_item item temp" id="ser">
<input id="in" type="search" placeholder=" Search here" style="width:100%; background-color: white; align-self: center;">
<!--<button id="search" style="background: url(images/search1.png); height: 40px; width: 40px; border: none;"></button>-->
</div>
<div class="nav-items flex-row" id="tempo">
<li class="ptopics item temp">New releases</li>
<li class="profile item temp">My profile</li>
<li class="about item temp">About us</li>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="nav-menu">
</div>
</nav>
</div>
<div class="firstp" style="max-width: 100vw; height: 100vw;">
<img style="float:left; max-width:50%vw; height:auto; margin: 10vw 10vw;" src="images/i1.png">
<p1 class="pm" style="margin-top: 10vw; padding-top: 5vw; float:left">Read <br> Write <br> Learn</p1>
</div>
I tried to make the width of navbar, navbar-container and navmenu 100% but its is still not working.

The class search_box_item has a padding: 0px 0px 0px 400px;. It causes the second <div> in <nav> to mess things up.
Checking elements one by one using Inspect Elements/Developer Tools helps a lot.

Related

Scroll animation on navbar wont work if below element is set to position absolute

I am creating a basic website for my family business in React and I have made a responsive navbar with a burger and scroll effect. So below my navbar is a cover photo which is getting pushed down every time the burger is clicked and the navigation list is revealed. When I give the cover a position:absolute; it wont get pushed, but the scroll effect wont work on the navbar anymore for some reason. note I am a beginner and this is my first real project. Below You will find my code:
Navbar component:
const Navbar = () => {
const [isClicked, setIsClicked] = useState(false)
const [sticky, setSticky] = useState(false)
useEffect(() => {
const handleScroll = () => {
setSticky(window.scrollY > 0);
};
window.addEventListener('scroll', handleScroll)
}, [])
return (
<nav className= {`navbar ${sticky? "sticky" : ""} ${isClicked && "activeNav"}`}>
<div className='logo'>
<img src={logo} alt = 'logo'/>
</div>
<div className='toggle-button' onClick={() => setIsClicked(!isClicked)}>
<span className={`bar ${isClicked && `active1`}`}></span>
<span className={`bar ${isClicked && `active2`}`}></span>
<span className={`bar ${isClicked && `active3`}`}></span>
</div>
<div className={`navbar-links ${isClicked && `active`}`}>
<ul>
<li><Link to='/'><p>O nama</p></Link></li>
<li><Link to='/'><p>Skola fudbala</p></Link></li>
<li><Link to='/'><p>Rodjendani</p></Link></li>
<li><Link to='/'><p>Kontakt</p></Link></li>
</ul>
</div>
</nav>
)
}
Navbar CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #052336;
color: white;
transition: 0.6s;
}
.navbar.sticky {
box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.6);
position: sticky;
top: 0;
z-index: 100;
opacity: 0.9;
}
.logo img {
height: 50px;
width: 50px;
margin-left: 10px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
top: 9px;
position: relative;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding: 0.8rem;
display: block;
font-size: 1.1rem;
transition:0.2s;
}
.navbar-links li a:hover {
color: #fecb40;
transform: scale(1.1);
}
.toggle-button {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
cursor: pointer;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border: 10px;
transition: .4s;
}
#media (max-width: 789px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
transition: 1s;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.bar.active1 {
rotate: 45deg;
translate: 0px 10px;
}
.bar.active2 {
background: transparent;
translate: -45px 0px;
}
.bar.active3 {
rotate: -45deg;
translate: 0px -8px;
}
}
Cover component:
const Cover = () => {
return (
<section id='cover'>
<div className = 'header-text'>
<h1>Zlatna Lopta</h1>
</div>
</section>
)
}
cover css:
#cover {
position:absolute;
width: 100%;
height: 800px;
top: 0;
z-index: -1;
background-image: url(/src/Components/Images/cover1.jpg);
background-size: cover;
background-position: center;
}
.header-text {
margin: 0 auto;
color: white;
position:relative;
top: 35%;
padding: 70px 0;
text-align: center;
}
.header-text h1 {
font-size: 5rem
}

How to I append a suffix to an animated counter?

I am having difficulty adding a static suffix to the end of these animated counters. I'd like to add a "+" sign to some of them, doesn't need to be animated.
I tried creating a suffix class but I can't get it to append directly to the end value, it just keeps appearing below the numbers. I am a complete beginner so if there's an obvious solution I apologize! I've searched the forums but the approaches don't seem similar to mine.
let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function() {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
* {
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
}
body {
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
.wrapper {
position: absolute;
width: 80vw;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: space-around;
gap: 10px;
}
.container {
width: 28vmin;
height: 28vmin;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 1em 0;
position: relative;
font-size: 16px;
border-radius: 0.5em;
backdrop-filter: blur(10px);
}
i {
color: #000000;
font-size: 3.8em;
text-align: center;
}
span.num {
color: #000000;
display: grid;
place-items: center;
font-weight: 600;
font-size: 3em;
}
span.text {
color: #000000;
font-size: 1em;
text-align: center;
pad: 0.7em 0;
font-weight: 400;
line-height: 0;
}
#media screen and (max-width: 1024px) {
.wrapper {
width: 85vw;
}
.container {
height: 26vmin;
width: 26vmin;
font-size: 12px;
}
}
#media screen and (max-width: 768px) {
.wrapper {
width: 90vw;
flex-wrap: wrap;
gap: 30px;
}
.container {
width: calc(50% - 40px);
height: 30vmin;
margin-bottom: 25px;
font-size: 14px;
}
}
#media screen and (max-width: 480px) {
.wrapper {
gap: 15px;
}
.container {
width: 100%;
height: 25vmin;
font-size: 8px;
margin-bottom: 25px;
}
}
<div class="wrapper">
<div class="container">
<i class="fa-regular fa-face-laugh"></i>
<span class="num" data-val="8">0</span>
<span class="text">Apples</span>
</div>
<div class="container">
<i class="fa-solid fa-users"></i>
<span class="num" data-val="40000">0</span>
<span class="text">Oranges</span>
</div>
<div class="container">
<i class="fa-regular fa-circle-down"></i>
<span class="num" data-val="2.3">0</span>
<span class="text">Lemons</span>
</div>
<div class="container">
<i class="fa-solid fa-podcast"></i>
<span class="num" data-val="900">0</span>
<span class="text">Pears</span>
</div>
</div>

It's pretty simple, you can use the :after pseudo-element to inject the +.
However, I had to remove the grid display for the .num elements, as that didn't align the added + nicely.
See the CSS block in this snippet.
let valueDisplays = document.querySelectorAll(".num");
let interval = 4000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function() {
startValue += 1;
valueDisplay.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
.num:after {
content: '+';
}
span.num {
text-align: center;
}
/* ^ That's all there is to it. */
* {
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
}
body {
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
.wrapper {
position: absolute;
width: 80vw;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
justify-content: space-around;
gap: 10px;
}
.container {
width: 28vmin;
height: 28vmin;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 1em 0;
position: relative;
font-size: 16px;
border-radius: 0.5em;
backdrop-filter: blur(10px);
}
i {
color: #000000;
font-size: 3.8em;
text-align: center;
}
span.num {
color: #000000;
font-weight: 600;
font-size: 3em;
}
span.text {
color: #000000;
font-size: 1em;
text-align: center;
pad: 0.7em 0;
font-weight: 400;
line-height: 0;
}
#media screen and (max-width: 1024px) {
.wrapper {
width: 85vw;
}
.container {
height: 26vmin;
width: 26vmin;
font-size: 12px;
}
}
#media screen and (max-width: 768px) {
.wrapper {
width: 90vw;
flex-wrap: wrap;
gap: 30px;
}
.container {
width: calc(50% - 40px);
height: 30vmin;
margin-bottom: 25px;
font-size: 14px;
}
}
#media screen and (max-width: 480px) {
.wrapper {
gap: 15px;
}
.container {
width: 100%;
height: 25vmin;
font-size: 8px;
margin-bottom: 25px;
}
}
<div class="wrapper">
<div class="container">
<i class="fa-regular fa-face-laugh"></i>
<span class="num" data-val="8">0</span>
<span class="text">Apples</span>
</div>
<div class="container">
<i class="fa-solid fa-users"></i>
<span class="num" data-val="40000">0</span>
<span class="text">Oranges</span>
</div>
<div class="container">
<i class="fa-regular fa-circle-down"></i>
<span class="num" data-val="2.3">0</span>
<span class="text">Lemons</span>
</div>
<div class="container">
<i class="fa-solid fa-podcast"></i>
<span class="num" data-val="900">0</span>
<span class="text">Pears</span>
</div>
</div>

Mobile Resizable Window Dropdown Menu Doesnt Work

Ok so I'm attempting a mobile resizable window. When I tried running it, it doesn't work and I don't know why. Here is my html code:
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<i class="fas fa-gem"></i> AigoLearningJuniorTeam
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Our Team
</li>
<li class="navbar__item">
Weekly Challenges
</li>
<li class="navbar__item">
Monthly Challenges
</li>
<li class="navbar__btn"> Get Started </li>
</ul>
</div>
</nav>
<script>src="app.js"</script>
</body>
Everything works perfectly fine until I resize my window into a mobile version, the drop menu icon shows, but when I press on it, nothing happens.

Fluid responsive navigation with dropdown

I have designed a navigation system for my project which is built on flexbox like unsplash
Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
For Main Navigation
=========================== */
.cm-navigation-area {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 5;
display: block;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.cm-navigation {
background: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
}
#media (max-width: 768px) {
.cm-navigation {
margin: 0 -5%;
}
}
.cm-burger-nav {
display: flex;
justify-content: center;
align-items: center;
}
#burger-nav {
fill: #575757;
}
.cm-logo {
display: flex;
justify-content: center;
align-items: center;
}
.cm-logo a img {
width: auto;
height: 50px;
}
#media (max-width: 991px) {
.cm-logo a img {
width: 80px;
height: auto;
}
}
.cm-nav nav {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cm-nav nav ul {
margin: 0;
padding: 0;
display: flex;
}
.cm-nav nav ul li {
list-style: none;
display: flex;
}
.cm-nav nav ul li:not(:last-child) {
margin-right: 1.8em;
}
#media (max-width: 991px) {
.cm-nav nav ul li:not(:last-child) {
margin-right: 10;
}
}
.cm-nav nav ul li a {
font-size: 0.9em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: gray;
font-weight: 300;
}
.cm-nav nav ul li a span {
padding-right: 0.4em;
}
.cm-nav nav ul li a span img {
width: 13px;
height: auto;
}
#media (max-width: 991px) {
.cm-nav nav ul li a span img {
width: 18px;
height: auto;
}
}
#media (max-width: 768px) {
.nav-r-text {
display: none;
}
}
.cm-currency {
font-size: 0.8em;
}
.cm-currency .cm-currency-link span {
margin-right: 0 !important;
}
.cm-currency .cm-currency-link span img {
width: 10px !important;
}
.cm-dots {
margin-right: 2.5em !important;
}
.cm-submit-photo {
margin-right: 48px !important;
}
.cm-submit-photo-link {
transition: all 0.2s ease-in-out;
display: flex;
background: #fff;
border: 1px solid #dddddd;
color: gray !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-submit-photo-link:hover {
border: 1px solid #dedede;
color: #dedede;
}
.cm-join-button {
position: relative;
}
.cm-join-button:before {
position: absolute;
top: 0;
left: -24px;
display: inline-block;
width: 1px;
height: 32px;
content: "";
background-color: gray;
}
.cm-join-button-link {
transition: all 0.3s ease-in-out;
display: flex;
background: green;
color: #ffffff !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-join-button-link:hover {
background: #004d00;
}
.cm-user-link img {
height: 30px;
width: auto;
}
.cm-cart {
min-height: 30px;
}
#cm-cart-link {
position: relative;
}
#cm-cart-link .cart-img {
width: 16px;
height: auto;
}
#cm-cart-link .cm-cart-badge:after {
position: absolute;
right: -6px;
top: 0;
content: attr(data-count);
font-size: 60%;
width: 16px;
height: 16px;
padding: 0.3em;
border-radius: 50%;
line-height: 1em;
color: white;
background: green;
text-align: center;
min-width: 1.2em;
}
/* ===================================
Navbar Search Integrations
=================================== */
.cm-nav-searchbar {
display: flex;
flex: 1;
align-items: center;
height: 100%;
padding: 0 1em;
}
#media (max-width: 1200px) {
.cm-nav-searchbar {
display: none;
}
}
.cm-nav-searchbar .field-container {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbar .icons-container {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbar .icon-search {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbar .icon-search:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbar .search-field {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbar .search-field:focus {
outline: none;
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
opacity: 0;
transform: translateX(200%);
}
/* ========================
Mobile Searchbar
======================== */
.cm-nav-searchbars {
display: flex;
flex: 1;
align-items: center;
height: 100%;
margin-top: 70px;
}
#media (min-width: 1200px) {
.cm-nav-searchbars {
display: none;
}
}
.cm-nav-searchbars .field-containers {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbars .icons-containers {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbars .icon-searchs {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbars .icon-searchs:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbars .search-fields {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbars .search-fields:focus {
outline: none;
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
opacity: 0;
transform: translateX(200%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
Main Navigation
=============================-->
<div class="cm-navigation-area">
<div class="cm-navigation px-5-percent">
<!--Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-burger-nav d-flex d-md-none">
<span>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</span>
</div>
<!--End Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-logo">
<a class="cm-logo-link" href="">
<img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
</a>
</div>
<div class="cm-nav-searchbar">
<fieldset class="field-container">
<input type="text" placeholder="Search Photos Here" class="search-field" />
<div class="icons-container">
<div class="icon-search"></div>
</div>
</fieldset>
</div>
<div class="cm-nav mr-md-2">
<nav>
<ul>
<li class="cm-currency">
<a class="cm-currency-link" href="">
<span>BDT</span>
<span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
</a>
</li>
<li class="cm-explore">
<a href="image-category.html">
<span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
<span class="nav-r-text">Explore</span>
</a>
</li>
<li class="cm-collection d-none d-md-flex">
<a href="./dashboard/dashboard-images.html">
<span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
<span class="nav-r-text">Collection</span>
</a>
</li>
<li class="cm-dots d-none d-md-flex">
<a href="">
<img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
</a>
</li>
<li class="cm-cart">
<a id="cm-cart-link" href="javascript:void(0)">
<span class="cm-cart-badge has-badge" data-count="2"></span>
<span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
</a>
</li>
<li class="cm-user d-flex d-md-none">
<a class="cm-user-link" href="">
<span>
<img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
</span>
<span class="nav-r-text">Login</span>
</a>
</li>
<li class="cm-submit-photo d-none d-md-flex">
<a class="cm-submit-photo-link" href="submit-image.html">
<!--<span>-->
<!--<img src="images/s_photo.svg" alt="">-->
<!--</span>-->
<span> Submit a photo </span>
</a>
</li>
<!--<li class="cm-user">-->
<!--<a class="cm-user-link" href="">-->
<!--<span>-->
<!--<img src="images/user.svg" alt="">-->
<!--</span>-->
<!--<span class="nav-r-text">Login</span>-->
<!--</a>-->
<!--</li>-->
<li class="cm-join-button d-none d-md-flex">
<a class="cm-join-button-link" href="">Login | Signup</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="cm-nav-searchbars">
<fieldset class="field-containers">
<input type="text" placeholder="Search Photos Here" class="search-fields" />
<div class="icons-containers">
<div class="icon-searchs"></div>
</div>
</fieldset>
</div>
Its look responsive but some how its not align and looks not beautiful on responsive, also I have to need a drop down like unsplash on dot hover or click event.
Thanks in advance

from a decimal to hexadecimal [duplicate]

This question already has answers here:
How to convert decimal to hexadecimal in JavaScript
(30 answers)
How to convert a very large hex number to decimal in javascript
(6 answers)
Working with hex strings and hex values more easily in Javascript
(4 answers)
Closed 4 years ago.
Could someone help me
with this problem? from decimal to binary is already working, but I couldn't get it working from decimal to hexadecimal.
I have a problem with this code: var ant2 = som2 * (gewenstgetal / 4); the rest is working but i couldn't get that to work, it would be very helpfull if someone can help me
function omzetten() {
var invoer = document.getElementById('omzettenInvoer').value;
var talstelselVan = document.getElementById('omvettenVan').value;
var gewenstgetal = document.getElementById('gewenstgetal').value;
var waarde = 1;
var positie = invoer.length - 1;
var som = 0;
while (positie >= 0) {
var cijfer = invoer.charAt(positie);
var poswaarde;
if (cijfer == "a") {
poswaarde = 10 * waarde
} else if (cijfer == "b") {
poswaarde = 11 * waarde
} else if (cijfer == "c") {
poswaarde = 12 * waarde
} else if (cijfer == "d") {
poswaarde = 13 * waarde
} else if (cijfer == "e") {
poswaarde = 14 * waarde
} else if (cijfer == "f") {
poswaarde = 15 * waarde
} else {
poswaarde = cijfer * waarde;
}
som = som + poswaarde;
positie--;
waarde = waarde * talstelselVan;
var som2 = som * gewenstgetal;
var ant2 = som2 * (gewenstgetal / 4);
document.getElementById('output1').value = som;
document.getElementById('output2').value = ant2;
}
}
/*phone*/
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav {
background-color: #10689A;
overflow: hidden;
}
#calcie {
margin-left: 19.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 50vw;
border-radius: 2em;
}
input[type="text"] {
width: 40vw !important;
}
header {
display: none;
}
#bobies {
width: 20vw;
position: absolute;
margin-left: 40vw;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #10689A;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#desktop {
display: none;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 70vw;
margin-left: 15vw;
text-align: center;
padding: 20px;
margin-top: 10vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
font-size: 5vw;
}
#toekomstreferencie {
width: 40vw;
height: 10vh;
margin-left: 28vw;
margin-top: 3vh;
background-color: #10689A;
border-radius: 2em;
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 32vw;
height: 4vh;
margin-left: 4vw;
margin-top: 3vh;
border-radius: 2em;
}
header {
width: 86.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
}
/*Tablet*/
#media screen and (min-width: 601px) {
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#calcie {
margin-left: 37.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 14vw;
border-radius: 2em;
}
input[type="text"] {
width: 10vw !important;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
font-size: 2vw;
}
#toekomstreferencie {
width: 15vw;
height: 10vh;
margin-left: 42vw;
margin-top: 3vh;
background-color: #10689A;
border-radius: 2em;
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 11vw;
height: 4vh;
margin-left: 2.0vw;
margin-top: 3vh;
border-radius: 2em;
}
header {
width: 86.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
}
/*Desktop*/
#media screen and (min-width: 1250px) {
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#calcie {
margin-left: 37.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 13vw;
border-radius: 2em;
}
input[type="text"] {
width: 10vw !important;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
}
#toekomstreferencie {
width: 15vw;
height: 10vh;
background-color: #10689A;
border-radius: 2em;
display: grid;
grid-area: grid;
grid-template-columns: auto;
grid-template-areas: 'grid';
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 7vw;
height: 4vh;
margin-left: 3.7vw;
margin-top: 3vh;
font-size: 1.2vw;
border-radius: 2em;
}
header {
width: 46.5vw;
margin-left: 30%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
#buttie {
min-width: 9vw;
margin-left: 3vw !important;
}
}
/*HD (High defenition)*/
#media screen and (min-width: 1800px) {
#bigmama1 {
width: 20vw;
height: 10vw;
position: absolute;
background-color: #10689A;
margin-left: 19vw;
margin-top: 4vw;
padding-left: 1.3vw;
}
#bigmama2 {
width: 11vw;
height: 10vw;
position: absolute;
background-color: #10689A;
margin-left: 24vw;
margin-top: 20vw;
}
#id1 {
margin-left: 22vw;
margin-top: 2vw;
position: absolute;
}
#nassi,
#nabr[type="text"] {
max-width: 2vw;
}
#id2 {
position: absolute;
margin-left: 26.5vw;
margin-top: 18vw;
}
#output1 {
margin-top: .5vw;
width: 17.1vw !important;
text-align: center;
height: 7vw;
overflow: auto;
}
#phone {
display: none;
}
#Navbar {
background-color: #10689A;
width: 99vw;
height: 120px;
min-width: : 500px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#Navbar a {
color: white;
font-size: 15px;
margin-top: 30px;
margin-right: 10%;
}
#calcie {
margin-left: 24.5vw !important;
text-align: center;
background-color: grey;
border: solid grey;
width: 9vw;
border-radius: 2em;
}
input[type="text"] {
width: 7vw !important;
}
#Navbar img {
width: 5vw;
height: 5vw;
Margin-top: -5px;
}
#desktop {
display: flex;
flex-wrap: nowrap;
}
#home {
margin-left: 2vw;
}
#logo {
margin-top: 20%;
position: absolute;
}
#welkomstekst {
background-color: #10689A;
width: 50vw;
margin-left: 25vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#welkomstekst p {
color: white;
}
#toekomstreferencie {
width: 15vw;
height: 8vh;
background-color: #10689A;
border-radius: 2em;
display: grid;
grid-area: grid;
grid-template-columns: auto;
grid-template-areas: 'grid';
margin-bottom: .9em;
}
#toekomstreferencie button {
width: 7vw;
height: 4vh;
margin-left: 3.7vw;
margin-top: 3vh;
font-size: 1.2vw;
border-radius: 2em;
}
header {
width: 46.5vw;
margin-left: 36%;
}
footer {
margin-top: 10vw;
}
#biggie {
max-width: 2vw;
}
#buttie {
min-width: 9vw;
margin-left: 3vw !important;
}
}
#bobie {
width: 3vw !important;
}
.nav-item {
padding-top: 1.4vw;
}
.dropdown {
max-width: 10vw;
float: right;
padding-top: 1.7vw;
}
.Fibo {
background-color: #10689A;
width: 50vw;
margin-left: 5vw;
text-align: center;
padding: 20px;
margin-top: 4vh;
line-height: 1.9;
border-radius: 2em;
}
#dReeksP {
color: white;
}
#dReeksF {
color: white;
}
#output2 {
margin-left: 12.9vw;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div id="desktop">
<ul class="nav nav-tabs auto-fill">
<li class="nav-item">
<a class="nav-link active" href="index.html"><img id="bobie" src="IMG/calculatorlogo.png"></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Rad van fortuin</a>
<li class="nav-item">
<a class="nav-link active" href="#">Shoot the pig</a>
</li>
</li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Rekenen
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Rekenpagina</li>
<li>Gevorderd rekenpagina</li>
<li>reeksen</li>
<li>Omrekenen</li>
</ul>
</div>
</ul>
</div>
</header>
<section id="phone">
<img id="bobies" src="IMG/calculatorlogo.png">
<div class="topnav" id="myTopnav">
Home
Rekenpagina
Gevordend Rekenpagina
Reeksen
Omrekenen
Rad van fortuin
Shoot the pig
☰
</div>
</section>
<div id="minis">
<div id="welkomstekst">
<p>Welkom bij <strong>Math-mate m2</strong> hier kan je:<br> lekker <strong>rekenen met hexa</strong></br>
eigen manier, heb je na het <strong>rekenen</strong></br>
zin in wat ontspanning speel shoot the pig!</p>
</div>
</div>
<div id="toekomstreferencie"><button id="buttie" onclick="toggle_visibility('minis')" href="#slides" data-toggle="collapse">Hexa's</button></div>
<div class="collapse" id="slides">
<div class="container">
<h3 id="id1">Binair naar hexadecimaal</h3>
<div id="bigmama1">
<form>
<input type="text" value "" id="omzettenInvoer" placeholder="Waarde" value="1010" />
<input type="number" value "" id="omvettenVan" placeholder="tal" value="2" />
<button type="button" id="arie" value "" name="-->" disabled>--></button>
<input type="text" value "" id="gewenstgetal" placeholder="tal" />
<button type="button" value="verzenden" onclick="omzetten()">Bereken</button></br>
<input type="text" value "" id="output1" name="input" />
<input type="text" value "" id="output2" name="input" />
</form>
</div>
<h3 id="id2">Factorizer</h3>
<div id="bigmama2">
<form>
<input type="text" value "" id="getalie" placeholder="Hier invullen" name="input" />
<button type="button" value="verzenden" onclick="he()">Bereken</button>
</form>
</div>
</div>
</div>
<footer>
<p> © Ravi Breugom en Alexander wallaard</p>
</footer>

We Keep Coding

JavaScript is the programming language of the Web.

The navbar's appears to not cover entire screen in mobile mode - javascript

The class search_box_item has a padding: 0px 0px 0px 400px;. It causes the second <div> in <nav> to mess things up. Checking elements one by one using Inspect Elements/Developer Tools helps a lot.

Related

Scroll animation on navbar wont work if below element is set to position absolute

How to I append a suffix to an animated counter?

Mobile Resizable Window Dropdown Menu Doesnt Work

Fluid responsive navigation with dropdown

from a decimal to hexadecimal [duplicate]

Categories

Resources