• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CSS navbar dropdown menu works well on everything except android.

Contributor ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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;}

}

 

 

TOPICS
Code , How to

Views

767

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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

 

FlawedMenu.gif

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 21, 2022 Dec 21, 2022

Copy link to clipboard

Copied

quote

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

What would you have done differently? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

BenPleysier_0-1671578830816.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

Bootstrap 👍 👍 👍

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 21, 2022 Dec 21, 2022

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 21, 2022 Dec 21, 2022

Copy link to clipboard

Copied

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 21, 2022 Dec 21, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 22, 2022 Dec 22, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 22, 2022 Dec 22, 2022

Copy link to clipboard

Copied

LATEST
quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 21, 2022 Dec 21, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 20, 2022 Dec 20, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Dec 21, 2022 Dec 21, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines