Navbar Element drops to second line instead of clinging with others

Navbar Element drops to second line instead of clinging with others - javascript

.NavbarA {
color: #bb9770;
float: left;
}
.navbar {
padding: 10px;
margin: 0 auto;
border: 1px solid #bb9770;
align-content: center;
align-items: center;
align-self: center;
justify-content: center;
background-color: #ffdab9;
}
.navbar .links {
margin-left: auto;
float: right;
flex-wrap: nowrap;
margin-top: 3px;
align-content: center;
align-items: center;
align-self: center;
justify-content: center;
}
.navbar a {
margin-left: 16px;
text-decoration: none;
color: #bb9770;
position: relative;
padding: 10px;
margin-bottom: auto;
font-weight: bolder;
}
.navbar a:hover {
color: white;
}
.navbar a::before {
transform: scaleX(0);
transform-origin: bottom right;
}
.navbar a:hover::before {
transform: scaleX(1);
transform: scaleY(2);
transform-origin: bottom left;
}
.navbar a::before {
content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: #ffdab9;
z-index: -1;
transition: transform .3s ease;
}
#media(max-width: 800px) {
.navbar .links {
display: none;
visibility: hidden;
}}
^^^ CSS
const Navbar = () => {
return (
<nav className="navbar">
<h2 className="NavbarA">A</h2>
<div className="links">
Home
Sample
Staff
About
Contact
Donate
Gallery
Preorder
</div>
</nav>
);
};
export default Navbar;
So I have a navbar and I am trying to align the items in one row, but for some reason, as you can see in the picture, the preorder tab is on the bottom and I don't want it to be there, but I can't fix it somehow? If I add anything new to the navbar, everything remains the same, but there is always 1 item that drops down to the second line no matter how many nabber items I add (no more than one item drops down). I am using react to code the js. I pasted the css and js above. Please help.

.navbar .links {
float: right;
flex-wrap: nowrap;
white-space: nowrap
/* white space makes it so the navbar does not come down again */
}
This is basically what I did to fix the problem. Adding the portion white-space: nowrap; makes it so that the Navbar does not go to a second line.

Related

Css is not doing what it intended for and I checked it again but can't find a problem

import React , {useState} from "react";
import Hamburger from "hamburger-react"
export default function Nav() {
const [isExpended , setIsExpended] = useState(false)
return(
<nav className="navigation">
WebName
<button onClick={() => {
setIsExpended(!isExpended)
}}
className="hamburger"><Hamburger /></button>
<div className={isExpended?"navigation-menu.expended":"navigation-menu"}>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
</ul>
</div>
</nav>
)
}
Css
.navigation {
height: 60px;
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.5rem 0rem;
background-color: #fff;
color: black;
box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
}
.brand-name {
text-decoration: none;
color: black;
font-size: 1.3rem;
margin-left: 1rem;
}
.navigation-menu {
margin-left: auto;
}
.navigation-menu ul {
display: flex;
padding: 0;
}
.navigation-menu li {
list-style-type: none;
margin: 0 1rem;
}
.navigation-menu li a {
text-decoration: none;
width: 100%;
justify-content: stretch;
}
.hamburger{
border: 0;
border-radius: 20%;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
display: none;
}
#media screen and (max-width:700px) {
.navigation-menu ul{
display:none;
}
}
#media screen and (max-width:700px){
.hamburger{
display: block;
}
}
this is the code that is not working other are working fine but when size changed Hamburger do comes but navigation-menu doesn't style and just appear there
#media screen and (max-width:700px){
.navigation-menu ul{
flex-wrap: wrap;
position: absolute;
top: 60px;
left: 0;
flex-direction: column;
width: 100%;
height: calc(100vh - 77px);
background-color: #fff;
border-top: 1px solid black;
}
.navigation-menu li{
text-align: center;
margin: 0;
}
.navigation-menu li a{
color: black;
width: 100%;
padding: 1.5rem 0;
}
.navigation-menu li:hover{
background-color: #eee;
}
i try instead of class Name I use there tag name but result was still the same i don't know where my code gone wrong everyother thing is working as intended
}
#media screen and (max-width:700px){
.navigation-menu ul{
display: none;
}
}
#media screen and (max-width:700px){
.navigation-menu-expended ul{
display: block;
}
}

Mobile nav displaying clickable elements underneath dropdown

I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.
The nav dropdown as show in this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here.
I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.
I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.
I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.
I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.
// navbar css
* {
margin: 0px;
}
:root {
--bg: #242526;
--bg-accent: #484a4d;
--nav-size: 60px;
--border: 1px solid #474a4d;
--border-radius: 8px;
--speed: 500ms;
margin-top: 75px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
/* color: #dadce1; */
text-decoration: none;
}
.logo {
color: #dadce1;
margin: 0px;
display: flex;
align-items: center;
}
.navbar {
height: var(--nav-size);
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
}
.navbar-list {
max-width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.nav-item {
width: calc(var(--nav-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.icon-button {
--button-size: calc(var(--nav-size) * 0.5);
width: var(--button-size);
height: var(--button-size);
/* background-color: #484a4d; */
border-radius: 50%;
padding: 5px;
margin: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown {
position: absolute;
z-index: 1;
top: 56px;
width: 300px;
transform: translateX(-35%);
background-color: rgb(16, 85, 211);
border: var(--border);
border-radius: var(--border-radius);
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 1;
}
.menu-item {
height: 50px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
/* transition: background var(--speed); */
padding: 0.5rem;
}
.menu-item:hover {
background-color: #525357;
}
.nav-profile-pic {
max-width: 75px;
}
// review-list css
button, .sort-by {
z-index: -1;
}

By just seeing your CSS, the easiest would be:
add z-index: 1000; (or any needed value) to the position: fixed; parent element .navBar.
Its child elements will perform accordingly - overlaying other elements on the page.
Z-index MDN Docs
and keep in mind to use z-index on elements with CSS having positon (other than : static;)

How can I prevent scrolling outside to the hidden navigation bar

I've made a navbar which shows up from the right of the screen when the user clicks on the hamburger menu. When I've tested the page I am able to scroll to the hidden navigation bar, whats a way to prevent this ? overflow?
nav {
display:flex;
justify-content: space-around;
align-items: center;
min-height: 2vh;
font-family: var(--ff-primary);
background-color: var(--clr-accent);}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
z-index: 9999;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: var(--clr-dark);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 16px;
}
.logo{
color: var(--clr-dark);
letter-spacing: 2px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 30px;
height: 3px;
background-color: var(--clr-dark);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width:1024px){
.nav-links{
width: 55%;
}
}
#media screen and (max-width:768px){
.nav-links{
position: absolute;
right: 0px;
height: 100%;
top: 5vh;
background-color: var(--clr-accent);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translateX(100%);
transition: transform 0.3s ease-in;
}
.nav-links a{
}
.nav-links li{
opacity: 1;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
this is my css code for the navbar, it is a hamburger on mobile and on regular screen size its just a navigation bar

Your menu is "hidden" unsuccessfully by positioning it 0px from the right:
#media screen and (max-width:768px){
.nav-links{
position: absolute;
right: 0px;
}
}
Try using negatives for your positioning, it positions elements outside of the view which prevents the ability to scroll them into view:
#media screen and (max-width:768px){
.nav-links{
position: absolute;
right: -100%;
}
}

Javascript Toggle class working but class not effective in element in dropdown

I frequently get these particular type of error in my code constantly which I will add a toggle function to the classList of an element with JavaScript and the code will toggle the class if I checked using the inspect element, but the class won't be effective to the element I add it to....
NOW MY PROBLEM IS :
In the code below at the media queries (max-width: 605px), I am trying to make a dropdown navigation. I added display:none to the #navbarp in the CSS and I added another class .open #navbarp { display:flex}, and I used the JavaScript to toggle the .open class. The JavaScript was toggling the class .open to the #navbarp but the CSS class wasn't effective -- the display: none wasn't changing to display:flex.
Please go to the link below to check the code
https://codepen.io/enipx/pen/zegJeP
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
height: 0;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
overflow: hidden;
}
.open #navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Change .open #navbarp to #navbarp.open (no space between #navbarp and .open). The former targets an element with id navbarp whose parent has the class .open. Using the latter (with no space) targets the element with both the ID and the class.
Remove the height: 0 and the overflow: hidden. These are making the elements disappear, even though display: flex is being applied. You shouldn't need them, because you have display: none which makes them totally disappear when they are supposed to be hidden.
var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')
function openNav() {
iconBtn.classList.toggle('click');
navbarp.classList.toggle('open');
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
.click .icon-1 {
transform: rotate(45deg) translate(9px, 7px);
}
.click .icon-2 {
opacity: 0;
}
.click .icon-3 {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
.open#navbarp {
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p" onclick="openNav()">
<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Home</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

Selector in CSS part for the case when #navbarp has open class is written wrong. Currently, it is saying for any children of the parent that has class open and id equal navbarp apply this rule (like here https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator). While the intent is that element over which rule should be applied, should contain has both id equal navbarp and class open.
So changing, .open #navbarp to .open#navbarp will fix an issue.

Better to use only one class for everything
const The_NavBar = document.getElementById('navbar');
document.getElementById('icon-p').onclick = function()
{
The_NavBar.classList.toggle('navOpen')
}
body {
font-family: arial;
margin: 0;
padding: 0;
}
/* ==== NAVBAR */
#navbar {
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
display: flex;
height: 60px;
align-items: center;
}
/* ==== NAVBAR ICON */
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 60px;
}
#navbar #icon-p:hover span {
background-color: #333;
}
#icon-p span {
width: 52px;
height: 6px;
border-radius: 3px;
margin-bottom: 6px;
background-color: gray;
transition: .4s;
}
#navbar.navOpen #icon-p span:nth-child(1) {
transform: rotate(45deg) translate(9px, 7px);
}
#navbar.navOpen #icon-p span:nth-child(2) {
opacity: 0;
}
#navbar.navOpen #icon-p span:nth-child(3) {
transform: rotate(-45deg) translate(9px, -7px);
}
/* ==== NAVBAR ELEMENT */
#navbarp {
display: flex;
list-style: none;
margin-left: auto;
margin-right: 80px;
}
#navbarp .navbarpli {
padding: 10px 25px;
}
#navbarp .navbarpli a {
text-decoration: none;
font-size: 1.2em;
color: gray;
transition: .7s;
}
#navbarp .navbarpli a:hover {
color: #333;
}
/* ==== NAVBAR DROPDOWN */
#dropdown {
list-style-type: none;
background-color: #F7F1CF;
position: absolute;
align-items: center;
width: 200px;
margin-top: 18px;
display: none;
animation-name: zoom;
animation-duration: .1s;
}
#keyframes zoom {
from {
transform: scale(.9);
}
to {
transform: scale(1);
}
}
#dropdown li {
margin: 0;
margin-left: -40px;
padding: 15px 10px;
}
#dropdown li:hover {
background-color: #E2DCBB;
}
#dropdownBtn:hover #dropdown {
display: block;
}
/* ==== media 910px */
#media (max-width: 910px) {
#navbarp {
margin-right: 30px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 30px;
}
}
#media (max-width: 800px) {
#navbarp {
margin-right: 20px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 20px;
}
#navbarp .navbarpli {
padding: 10px 20px;
}
#navbarp .navbarpli a {
font-size: 1.1em;
}
}
/* ==== media 700px */
#media (max-width: 706px) {
#navbarp {
margin-right: 5px;
}
#navbar #icon-p {
display: flex;
flex-direction: column;
margin-left: 10px;
}
#navbarp .navbarpli {
padding: 10px 18px;
}
#navbarp .navbarpli a {
font-size: 1em;
}
}
/* ==== media 605px */
#media (max-width: 605px) {
#navbar {
flex-direction: column;
}
#navbarp {
flex-direction: column;
background: linear-gradient(to right, #E5DDB3, #F7F1CF);
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
display: none;
}
#navbar.navOpen #navbarp {
/* .open#navbarp */
display: flex;
}
#navbarp .navbarpli {
padding: 20px 0px;
}
#navbarp .navbarpli a {
font-size: 1.2em;
}
#navbar #icon-p {
margin: 0px;
margin: 12px 0;
}
#dropdown {
text-align: center;
margin-top: 10px;
right: 30%;
}
}
<div id="navbar">
<div id="icon-p">
<span></span>
<span></span>
<span></span>
</div>
<ul id="navbarp">
<li class="navbarpli">Homes</li>
<li class="navbarpli">Explore</li>
<li class="navbarpli">Filter</li>
<li class="navbarpli" id="dropdownBtn">Discover
<ul id="dropdown">
<li>By Age</li>
<li>By User</li>
<li>By Name</li>
<li>By State</li>
</ul>
</li>
<li class="navbarpli">Affiliate</li>
<li class="navbarpli">More</li>
</ul>
</div>

sliding responsive nav - flash on load and responsive page

I have made my own responsive nav using css and jquery for the nav. I want the nav to fade in on burger button click and slide into view. I have this working well. However, when the page loads or the page is made smaller, the nav is shown briefly before sliding away.
see link
www.update.jonfullerwebdesign.co.uk
nav {
position: fixed;
width: 100%;
background: rgba($dark-grey, .8);
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
min-height: 50px;
z-index: 999;
#include desktop {
background: rgba($dark-grey, .7);
}
.logo {
width: 52px;
position: absolute;
left:15px;
top:10px;
z-index: 20;
#include desktop {
top: 8px;
}
}
.menu-button {
position: absolute;
top:15px;
right:15px;
z-index: 200;
#include desktop {
display:none;
}
}
ul {
width: 100vw;
height: 100vh;
opacity: 0;
display: flex;
// position: absolute;
transform: translateX(-100%);
top: 0;
background: inherit;
flex-direction: column;
justify-content: center;
transition: all 800ms ease-in;
#include desktop {
position: relative;
display: flex;
opacity: 1;
transform: translateX(0);
height: auto;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
transition: none;
background: none;
}
li {
display: block;
text-align: center;
margin-bottom: 30px;
#include desktop {
margin-bottom: 0;
margin-left: 3%;
margin-right: 3%;
}
a {
display: block;
width: 100%;
padding: 1px;
color: white;
font-size: 44px;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
padding: 30px 0;
&:hover,
&:focus {
color:$brand-blue;
}
#include desktop {
font-size: 22px;
padding: 5px;
}
}
.active {
color: $brand-blue;
}
}
}
.shown {
opacity: 1;
transform: translateX(0);
padding-top: 40px;
padding-bottom: 40px;
display: flex;
#include desktop {
padding: 0;
}
}
}
$(document).ready(function(){
$(".menu-button").click(function(){
$("nav ul").toggleClass("shown")
});
});

You need to include the new transition values within your media query. Your current default is transform: translateX(0);
#media (min-width: 62rem){
nav ul {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}

Develop Reference

JavaScript is the programming language of the Web.

Navbar Element drops to second line instead of clinging with others - javascript

.navbar .links { float: right; flex-wrap: nowrap; white-space: nowrap /* white space makes it so the navbar does not come down again */ } This is basically what I did to fix the problem. Adding the portion white-space: nowrap; makes it so that the Navbar does not go to a second line.

Related

Css is not doing what it intended for and I checked it again but can't find a problem

Mobile nav displaying clickable elements underneath dropdown

How can I prevent scrolling outside to the hidden navigation bar

Javascript Toggle class working but class not effective in element in dropdown

sliding responsive nav - flash on load and responsive page

Categories

Resources