Submenu leaving pixels in desktop view

[default0vaokg78cv42]

I came up with a template design that I like. Everything works well with no errors, except for one detail. The drop down menu in desktop mode leaves a residue of text for a second or so, before fading off. 

Here is the code that affects that area:

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

top: 4rem;

opacity: 1;

visibility: visible;

}

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

top: 0rem;

left: 8rem;

}

At first I tried using a no hover class after the hover class:

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

display:none;

}

That fixed the problem in mobile view but not desktop view. It eliminated the residue but rendered the sub menu unusable, because it disappeared too fast. I also tried experimenting with transition properties. That made it worse. Is there any easy fix?  Here is the page:  

https://atnuke.com/idx-1.html

[Link edited by moderator for clarity.]

Thanks again.

[BenPleysier]

Add `opacity: 0;` to the sub-menu as in 

.sub-menu {
	line-height: 2rem;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	padding-left: 5px;
	padding-right: 5px;
	display: block;
	position: absolute;
	border-top: 3px solid #145DDD;
	background-color: #191919;
	-webkit-transition: all 650ms ease;
	transition: all 650ms ease;
	top: 4rem;
	visibility: hidden;
	z-index: 1000;
    opacity: 0;
}

Off Topic: Your CSS is a complete mess! First, you need to start with the smallest screen size first. Make sure everything looks the way that you want it to. Then fiddle with media queries and override only those style rules that affect the next size up. .nav-menu li:hover>.sub-menu{ top: 4rem; opacity: 1; visibility: visible; } .sub-menu li:hover>.sub-menu{ top: 0rem; left: 8rem; }

Either, properly structure the style sheet or have specific style sheets per component. The latter is ceratinly true if serving HTTP/2 or higher.

A time saving solution is to use Bootstrap. I know, I know, you want to do it yourself and that is to be respected. But I think that your time could be spent more productively than sitting behind that screen. Someone close to you is bound to agree.

[osgood_]

Lol, a mess is created by the user not the tools of the job, even Bootstrap will  create a mess in the wrong hands.  Too depressing to even consider what's going on these days, it's getting worse, no pain, no gain, certainly no control.

[default0vaokg78cv42]

How does one learn without making mistakes? You advised that I stop using bootstrap. I did. There is a learning curve with everything. I don't code CSS with 20 years experience beause I just started.  The navbar works on everything except for the android. 

[osgood_]

How does one learn without making mistakes? You advised that I stop using bootstrap. I did. There is a learning curve with everything. I don't code CSS with 20 years experience beause I just started.  The navbar works on everything except for the android. 

By @default0vaokg78cv42

You can't l guess, it's just painful to watch but as you say everyone has to start somewhere, however that's even becoming increasingly difficult due to more options available.

I think the thing here's is you are using css hover which really only complicates the issue as that is useless on mobile devices plus the structure of the navigation is complex due to the extra flyout menu which is also useless on mobile.

I think it would possibly be far easier to just have a set of top level navigation options then deploy the use of off-canvas navigation options which slide in from the right in both desktop and mobile devices using onclick javascript events.

[BenPleysier]

If bootstrap was that bad, it would never give you a Lighthuis score of 100, yet this page does

It even loads larger images for the lightbox.

The server is on the west coast of the USA, I am in southern Australia. So it can't be that.

[osgood_]

If bootstrap was that bad, it would never give you a Lighthuis score of 100, yet this page does

By @BenPleysier

Zero to do with Bootstrap. I can show you Bootstrap developed websites build in Wappler that score pretty poorly when analysed by lighthouse, particulary in mobile devices if of course you think 54%/69% for 'performance' is a little less than desired.

[BenPleysier]

Does this mean that Bootstrap is ignored when assigning top marks for performance?

In your wisdom, what then differentiates my website from those that perform poorly?

To give you a helping hand, have a look at

https://youtu.be/xjiBtwkmUFI

[osgood_]

In your wisdom, what then differentiates my website from those that perform badly

By @BenPleysier

It's perfectly obvious that you don't have the excessive amount of crap going on as the poorly performing websites.

As I said Bootstrap is immaterial as to if you get a good score from Lighthouse. Use it poorly or add to much additional external junk and you will get a score which is appropriate. This applies if you don't use Bootstrap as well.

Whether or not you get a good score in Lighthouse also depends on how much time you dedicate to solving the issues flagged up by it. You and l have 'until tomorrow never comes' to solve these issues if desired but l would think most developers need to consider how much they are getting paid and how much work they have to get through.

[default0vaokg78cv42]

Adding the opacity = 0 property worked. The webkit properties did not work.  That problem is solved.  It might be a mess, but it works on everthing except android. 

[default0vaokg78cv42]

Setting the opacity 0 property worked. The webkit properties did not work.  That problem is solved.  It might be a mess, but it works on everthing except android. 

Likes