Skip to main content

Questions

Questions

  • 10000+ Posts
  • 46,087 Replies
10000+ Posts
R
Raymond27596792zyviParticipant
 Questions
lbjessen
lbjessenParticipating Frequently
 Questions
B
Bob27679301gxk7Participant
 Questions
J
jefferisInspiring
 Questions
D
default0vaokg78cv42Inspiring
 Questions
CSS navbar dropdown menu works well on everything except android.

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:

17181
O
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
 Questions
D
default0vaokg78cv42Inspiring
 Questions
Submenu leaving pixels in desktop view

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.  

6531
O
E
edinav24550678Known Participant
 Questions
P
Patricia275787014y6kInspiring
 Questions
G
Grant27647095muotParticipant
 Questions
N
nice_GleamB82BKnown Participant
 Questions
S
scottbatemanParticipant
 Questions
R
rossisaacsInspiring
 Questions
Having difficulty adding photos with tables

Hello Community!  I don't do a lot of web design, and the last time I used Dreamweaver was 2019 - apparently it has changed a bit.  I'm updating a site for a friend.  Originally, I made one jpeg in Photoshop with all the elements of the web page on it.  In 2019, I was able to "map" my navigational buttons from that single jpeg.  Worked great for me.In re-doing the site, I cannot find a "map" function to do that, so I've been racking my brain, trying to use tables, to make my side-by-side navs (on the left) that link to one large image on the right.  The first image was from my 2019 site, where everything was on one jpeg and the navs were mapped to create the links to connect the web pages.  The 2nd image is what I currently have.  I made a 2-column table, with the navs on the left.... but whenever I try to add the large image on the right side of the table, it either goes on top of the navs, or splits the navs.  Ultimately, I would like

14353
O
BenPleysier
Community Expert
BenPleysierCommunity Expert
 Questions
H
Haybound23605476Known Participant
 Questions
D
default9dwj3r2islalParticipant
 Questions
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
 Questions
E-Commerce & Credit Card Compliance

We recently went through a thorough site inspection to satisfy new credit card compliance guidelines.  I thought I would share some of the things we were required to add to our site in order to pass inspection.   1. Privacy Policy revised to include data tracking by 3rd party sites like Google Analytics and social media to which the site may be linked. 2. Refund & Return Policy. 3. Complaint Resolution Policy & Timeline.  If there's a dispute, who settles it and how long does the process take, etc...? 4. Complaint submission form and/or contact details (name, address, telephone).   This is on top of existing requirements about record keeping, data protection & encryption to keep user data safe & secure.   If your site conducts business in the European Union, additional regional requirements may apply.   Happy coding!  

1390
Nancy OShea
Community Expert
F
flymedicParticipant
 Questions
D
default0vaokg78cv42Inspiring
 Questions
Trying to get the side bar background to extend to the bottom, using CSS

I’m trying to get the sidebar div, “col-2” to extend down to the bottom with the content in the adjacent column, “col”.  Col-2 contains a vertical navbar in a blue background. I’m trying to get the blue background to extend to the bottom of the page, matching the length of variable content on the right. I have tried all solutions I found on the internet. I’ve set the height to 100%. I have tried flex-grow and flex-shrink. I’ve tried changing the positioning, as well as using 100vh, 100vw settings. There was either no change, or it messed up the design. Is there any simple solution? I was hoping height: 100%; would work, but nothing is every that easy.  Here is the relevant code: *{padding: 0;margin: 0;box-sizing: border-box; }body {margin-top: 4.2rem;min-height: 100vh;display: flex;flex-direction: column;height: 100%;} .main {position: relative;overflow: inherit;display:flex;width:95%;} /** vertical blue container wrapping navbar**/.col-2 {position: r

2931
D
P
Patricia275787014y6kInspiring
 Questions
D
David26827030gqcyParticipant
 Questions
V
vitorg11768724Participant
 Questions
E
EmmaMiller310Participant
 Questions
E
emidwoodParticipant
 Questions
D
default0vaokg78cv42Inspiring
 Questions
Footer will not stay at the bottom, ignores text container div

 I tried to create a template with a mobile responsive nav bar and a vertical nav bar. The vertical nav bar disappears in tablet and mobile view with a media query (as planned). I then added a container for content: text and images, etc. It stays to the right of the vertical nav bar in desktop view, then expands in mobile view.  That all worked well. My problem is with the footer.  In position: absolute, It will stay below the vertical nav bar, but it will ignore the container div with the text inside. In mobile view, the footer simply goes to the top.  I tried many solutions from videos and how-to websites, including the implementation of wrappers, flex and grid. Nothing worked. The solutions usually made things worse. Please advise on any possible coding solutions. (not bootstrap). Thanks.  The CSS and HTML are quite long. I will leave the link, instead. The footer class is “foot”. www.atnuke(dot)com/nav(dot)html

5081
D

Resources

Community Guidelines Help Center Learn tutorials
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices