CSS navbar dropdown menu works well on everything except android.

Report · Dec 20, 2022

I checked my navbar on PC desktop, MacBook, iPhone, iPad. The hamburger dropdown menu worked fine.

I checked android and it did not work. The menu simply disappears if I touch the one drop-down item. If I hold it down for a few seconds it sort of works, but that isn’t ideal.

Is there a media query that could isolate the android? I could then simplify the menu, specifically for that device. The media queries I know of only relate to screen width, which is too general.

Test page: www(dot)atnuke(dot)com/nav(dot)html

This is the relevant code with media query:

.navbar {

display:flex;

position: fixed;

overflow: visible;

background-color: #27254F;

top: 0;

min-height: 70px;

justify-content: space-between;

align-items: center;

padding: 0 24px;

width: 100%;

border-bottom: 2px solid #BEDEFA;

}

.nav-menu {

display:flex;

justify-content: space-between;

align-items: center;

gap: 60px;

}

.nav-menu li:hover>.sub-menu{

top: 4rem;

opacity: 1;

visibility: visible;

}

.sub-menu li:hover>.sub-menu{

top: 0rem;

left: 8rem;

}

.nav-link{

transition: 0.7s ease;

font-size: 1.2rem;

}

.nav-link:hover{

color: dodgerblue;

}

.sub-menu {

line-height: 2rem;

width: max-content;

padding-left: 5px;

padding-right: 5px;

display: block;

position: absolute;

border-top: 3px solid #145DDD;

background-color: #191919;

transition: all 650ms ease;

top: 4rem;

visibility: hidden;

z-index: 1000;

opacity: 0;

}

.sub-menu::before {

content: "";

position: absolute;

top: -1.5rem;

left: 2rem;

border: 0.6rem solid transparent;

border-bottom-color: cornflowerblue;

}

.sub-menu .sub-menu::before {

top: 0rem;

left: -1.5rem;

border: 0.6rem solid transparent;

border-right-color: cornflowerblue;

}

.sub-menu .sub-menu {

top: 0;

border-top:none;

border-left: 3px solid cornflowerblue;

left: 160%;

}

.nav-menu li:hover > .sub-menu {

top: 4rem;

opacity: 1;

visibility: visible;

}

.sub-menu li:hover > .sub-menu {

top: inherit;

left: 110%;

margin-top: -1.5rem;

border-radius: 0;

}

@media(max-width:845px){

.nav-menu{

position: fixed;

left: -100%;

top: 70px;

gap: 0;

flex-direction: column;

background-color: #262626;

width: 100%;

text-align: center;}

.nav-menu.active{

left: 0;

}

.sub-menu {

position: initial;

border: 3px solid transparent;

border-left-color: cornflowerblue;

margin-left: 1rem;

max-height: 0;

}

.sub-menu::before {

display: none;

}

.nav-menu li:hover> .sub-menu{

opacity: 1;

visibility: visible;

max-height: initial;

}

.nav-menu li:not(:hover)> .sub-menu{

display:none;

}

.sub-menu .sub-menu {display: none;}

}

Report · Dec 20, 2022

Most likely due to an inferior Android browser. Use another browser.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 20, 2022

Most likely due to an inferior Android browser. Use another browser.

By @Nancy OShea

No, the navigation css is janky. The OP is describing exactly what happens on Android browsers, the navigation is a bit hit and miss at the moment, not really a great experience for the user.

Report · Dec 20, 2022

I see what you mean. It's fidgety & unstable, not user-friendly. I wouldn't use it.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 20, 2022

Drop-down doesn't work at all on mobile devices at the moment and the whole menu system is a bit flaky on desktop.

Report · Dec 20, 2022

I disabled the drop-down menu in mobile view. That problem is solved. How do you suggest that I fix what you see wrong with the navbar in desktop view? Should I have used -webkit etc?

Report · Dec 21, 2022

I disabled the drop-down menu in mobile view. That problem is solved. How do you suggest that I fix what you see wrong with the navbar in desktop view? Should I have used -webkit etc?

By @default0vaokg78cv42

I'll post a coded version later today, which I think is a better option using off-canvas menus, and will work in both desktop and mobile.

Report · Dec 20, 2022

What would you have done differently?

Report · Dec 20, 2022

Wappler, the only real Dreamweaver alternative.

Report · Dec 20, 2022

Bootstrap 👍 👍 👍

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 20, 2022

Bootstrap is easy, but it doesn't display well on firefox. I created a bootstrap slide show, and one from scracth using code from W3. They both work, but the bootstrap version takes 1-2 minutes to load...by that time you lose the customer. The one from scratch works instantaenously. There were other examples. I would rather try to learn coding. Using frameworks reminds me of using wordpress or wix. It works ok, but not very appealing.

Report · Dec 20, 2022

Why work harder when you can work smarter? It's no coincidence that most WordPress & Webflow themes are based on Bootstrap. Or that Bootstrap is used by millions of websites worldwide.

Time is money. When the client has a time sensitive project and limited budget, you learn fast why Bootstrap (used correctly) is a blessing, not a sin.

I don't know what latency problems you had or with which version of Bootstrap but many factors effect page load. Mixed content (https with http), the size & quantity of images, how they're pre-loaded, your Internet connection and the speed of your server. That said, Bootstrap's minified scripts haven't posed any major problems for me. The Bootstrap sites I build load fast and usually earn a Lighthouse Performance Score of 95% or better.

Wesite Performance Test

https://gtmetrix.com/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 21, 2022

Working harder....knowledge = power. When I first worked with bootstrap, I was seeing errors on Chrome console, even though my personal code came up with no errors. You yourself told me that there is no way around that. Such errors are probably bad for SEO, and it's impossible to correct frameworks myself. I do have some extra time, so I am attempting to learn to code. An associate of mine did not have much time and created a website with a CMS. He did his best, but it looks ghastly. At least when I make mistakes, I can correct them later. I've corrected many flaws already, on my own, and with the help of others. My mistake was to use code from how-to videos. They often use code that they did not display, and from third parties. W3 seems like a better resource.

Report · Dec 21, 2022

Have a look at the below code, copy and paste into a new file, view in browser. Its quite like yours but a bit cleaner and more stable and uses off-canvas menus.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlantic Nuclear</title>

<style>
* {
box-sizing: border-box;
}
a {
transition: all 500ms ease-in-out;
}
body {
margin: 0;
font-family:  Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
.header {
display: flex;
align-items: center;
background-color: #27254E;
}
.logoHamburger {
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logoHamburger h2 {
color: #fff;
margin: 0;
padding: 0 30px;
font-size: 30px;
font-weight: 500;
}

.navWrapper {
width: 70%;
background-color: #27254E;
}
/* TOP LEVEL NAVIGATION CSS */
.nav {
display: flex;
justify-content: right;
margin: 0;
padding: 0;
}
.nav li {
margin: 0;
padding: 0;
list-style: none;
}
.nav a {
display: flex;
align-items: center;
font-size: 20px;
text-decoration: none;
color: #fff;
padding: 25px 35px;
}
.nav a:hover {
color: #0099f2;
}
.topLink {
position: relative;
}
/* SUB MENU CSS */
.subMenu {
position: absolute;
margin: 0;
padding: 0;
background-color: #0099f2;
width: 250px;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height 1s ease-in-out;
}
.subMenu li a {
display: flex;
justify-content: space-between;
padding: 10px 35px;
}
.subMenu li {
border-bottom: 1px solid #fff;
width: 100%;
}
.subMenu li:last-child {
border-bottom: none;
}
.subMenu a:hover {
background-color: #0071b3;
color: #fff;
}
/* SLIDE DOWN SUB MENU WHEN TOP LEVEL NAVIGATION OPTION IS CLICKED - APPLIED WITH JAVASCRIPT */
.subMenu.slideDown {
max-height: 500px!important;
}
/* SHOW NAV WHEN HAMBURGER IS CLICKED - APPLIED WITH JAVASCRIPT */
.show {
display: flex!important;
}

/* CARET DOWN & RIGHT CSS */
.caret {
width: 0;
height: 0;
border: 6px solid transparent;
}
.caret.down {
border-top-color: #fff;
margin: 3px 0 0 7px;
}
.caret.right {
border-left-color: #fff;
}

/* OPTIONS OFF-CANVAS NAVIGATION CSS */
.optionsNav {
position: fixed;
top: 0;
right: 0;
z-index: 100;
transform: translateX(100%);
transition: all .5s ease-in-out;
height: 100vh;
width: 50vw;
background-color: #0099f2;
margin: 0;
padding: 80px 60px;
}
.optionsNav h3 {
margin: 0 0 30px 0;
padding: 0;
font-size: 40px;
line-height: 50px;
font-weight: 500;
color: #27254E;
}
.optionsNav ul {
margin: 0;
padding: 0;
}
.optionsNav li {
margin: 0;
padding: 0;
list-style: none;
}
.optionsNav li a {
text-decoration: none;
font-size: 20px;
padding: 15px 0;
display: block;
color: #fff;
}
.optionsNav li a:hover {
color: #27254E
}



/* SLIDE IN OPTIONS OFF-CANVAS NAVIGATION */
.slideIn {
transform: translateX(0);
}
/* CLOSE OPTIONS OFF-CANVAS NAVIGATION */
.closeOptionsNav {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
z-index: 100;
right: 40px;
top: 30px;
cursor: pointer;
font-size: 30px;
height: 25px;
width: 30px;
}
/* CLOSE OPTIONS NAVIGATION ICON */
.closeOptionsNav div {
height: 2px;
background-color: #fff;
position: absolute;
width: 100%;
transform: rotate(45deg);
}
.closeOptionsNav div:nth-child(1) {
transform: rotate(-45deg);
}
.closeOptionsNav:hover div {
background-color: #27254E;
}

/* HAMBURGER CSS */
.hamburger {
position:	relative;
color: #fff;
cursor: pointer;
display: none;
width:	 32px;
height:	 22px;
margin: 0 35px 0 0
}
/* DEFAULT HAMBURGER STATE */
.hamburger > div {
height:	2px;
background-color:	 #fff;
width:	 100%;
transition:	all 	300ms	ease-in-out;
}
.hamburger div:nth-child(1) {
position:	 absolute;
top:	0;
}
.hamburger div:nth-child(2) {
position:	 absolute;
top:	10px;
}
.hamburger div:nth-child(3) {
position:	 absolute;
top:	10px;
}
.hamburger div:nth-child(4) {
position:	absolute;
bottom:	 0;
}
/* OPEN HAMBURGER STATE APPLIED WITH JAVASCRIPT */
.hamburger.open div:nth-child(1) {
top:	11px;
opacity:	 0;
}
.hamburger.open div:nth-child(2) {
transform:	rotate(45deg);
}
.hamburger.open div:nth-child(3) {
transform:	rotate(-45deg);
}
.hamburger.open div:nth-child(4) {
top:	11px;
opacity:	 0;
}



/* MEDIA QUERY FOR 900px BROWSER WIDTH */
@media (max-width: 900px) {
.header {
flex-direction: column;
}
.logoHamburger {
width: 100%;
padding: 20px 0;
}
.navWrapper {
width: 100%;
}
.nav {
flex-direction: column;
display: none;
}
.nav a {
padding: 15px 35px;
}
.subMenu {
position: static;
width: 100%;
}
.subMenu a:hover {
background-color: #0071b3;
}
.hamburger {
display: block;
}
.optionsNav {
width: 100vw!important;
}
}


</style>

</head>
<body>

<!-- START HEADER -->
<header class="header">
<!-- START LOGO HAMBURGER -->
<div class="logoHamburger">
<h2 class="logo">Atlantic Nuclear</h2>

<div class="hamburger">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- END HAMBURGER -->

</div>
<!-- END LOGO HAMBURGER -->

<!-- START NAVIGATION WRAPPER -->
<div class="navWrapper">

<!-- START NAVIGATION -->
<ul class="nav">
<li>
<a class="topLink" href="#">Home</a>
</li>

<li>
<a class="topLink" href="#">Products<span class="caret down"></span></a>
<ul class="subMenu">
<li><a href="#" class="subLinks" data-option="Instrumentation">Instrumentation<span class="caret right"></span></a></li>
<li><a href="#">Shielding</a></li>
<li><a href="#" class="subLinks" data-option="Sources">Sources<span class="caret right"></span></a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Air Sampling</a></li>
<li><a href="#" class="subLinks" data-option="HoodsFilters">Hoods &amp; Filters<span class="caret right"></span></a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>

<li>
<a class="topLink" href="#" >Services</a>
</li>

<li>
<a class="topLink" href="#" >About</a>
</li>

<li>
<a class="topLink" href="#" >Contact</a>
</li>
</ul>
<!-- END NAVIGATION -->

</div>
<!-- END NAVIGATION WRAPPER -->

</header>
<!-- END HEADER -->

<!-- INSTRUMENTATION OPTIONS OFF-CANVAS NAVIGATION -->
<div class="optionsNav Instrumentation">
<div class="closeOptionsNav">
<div></div>
<div></div>
</div>
<h3>Instrumentation</h3>
<ul>
<li><a href="">Ludlum Instrumentation</a></li>
<li><a href="">Ludlum Probes</a></li>
<li><a href="">Protean</a></li>
<li><a href="">Dosimetry</a></li>
<li><a href="">Dose Calibrators</a></li>
<li><a href="">Simulated Rad Training</a></li>
<li><a href="">Multi-Channel Analyzers</a></li>
</ul>
</div>


<!-- SOURCES OPTIONS OFF-CANVAS NAVIGATION -->
<div class="optionsNav Sources">
<div class="closeOptionsNav">
<div></div>
<div></div>
</div>
<h3>Sources</h3>
<ul>
<li><a href="">Flood Sources</a></li>
<li><a href="">Check Sources</a></li>
<li><a href="">Tube Sources</a></li>
</ul>
</div>


<!-- HOODS & FILTERS OPTIONS OFF-CANVAS NAVIGATION -->
<div class="optionsNav HoodsFilters">
<div class="closeOptionsNav">
<div></div>
<div></div>
</div>
<h3>Hoods &amp; Filters</h3>
<ul>
<li><a href="">Stainless Steel Hoods</a></li>
<li><a href="">Portable Iodine Hoods</a></li>
</ul>
</div>


<script>
const topLink = document.querySelectorAll('.topLink');
const subMenu = document.querySelectorAll('.subMenu');
const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.nav');
const subLinks = document.querySelectorAll('.subLinks');
const optionsNav = document.querySelectorAll('.optionsNav');
const closeOptionsNav = document.querySelectorAll('.closeOptionsNav');

topLink.forEach(function(item) {
item.onclick = function() {
subMenu.forEach(function(item) {
item.classList.remove('slideDown');
});
item.nextElementSibling.classList.add('slideDown');
};
});

subLinks.forEach(function(item) {
item.onclick = function() {
const dataOption = item.getAttribute('data-option');
const selectedDataOption = document.querySelector('.' + dataOption);
selectedDataOption.classList.add('slideIn');
};
});

hamburger.onclick = function() {
nav.classList.toggle('show');
hamburger.classList.toggle('open');
};


closeOptionsNav.forEach(function(item) {
item.onclick = function() {
optionsNav.forEach(function(optionsNav) {
optionsNav.classList.remove('slideIn');
});
};
});

/* CLOSE SUB MENUS IF BROWSER WINDOW WIDTH IS LESS THAN 768px */
window.onresize = closeSubMenus;
function closeSubMenus() {
if (window.innerWidth < 768) {
nav.classList.remove('show');
subMenu.forEach(function(item) {
item.classList.remove('slideDown');
});
}
}

</script>

</body>
</html>

Report · Dec 21, 2022

thanks very much. I look forward to going through it. I want to clean up the code.

Report · Dec 22, 2022

I meant I want to clean up my bad code with your good code. thanks for your hard work.

Report · Dec 22, 2022

I meant I want to clean up my bad code with your good code. thanks for your hard work.

By @default0vaokg78cv42

No problem, you are welcome. Have a happy holiday season yourself.

Report · Dec 21, 2022

I would rather try to learn coding. Using frameworks reminds me of using wordpress or wix. It works ok, but not very appealing.

By @default0vaokg78cv42

I agree, too many need a framework crutch these days and are lost without it. That's not hugely professional in my opinon but its the way of the World, less and less experienced and more and more amatures. I have no desire to be a robot, clicking, dragging, applying coloring by numbers techniques all day long. I'll leave that to the skivvies of the World.

Report · Dec 20, 2022

Hover is a no no on tocuh devices.

Menu navigation needs to be on a click. You can code a navigation for desktop to work on hover but why the extra step and change to the UX concept between devices.. Always a fan of being consistant plus many laptops are also touch screen these days.
SO...
A navigation should consider all window sizes and input device so function on click is your best bet off the bat.
A very basic example of this here: https://codepen.io/taniarascia/pen/dYvvYv
You want to avoid gaps and keep it all very clear and then ensure it's as simple as possible so it is most effective across all devices. You can only go really fancy with navigation if you really have few links in them. Anything functional has to be well thought out.

Report · Dec 21, 2022

Thanks for the link. I did disable hovering in mobile/tablet view, since I posted.