I have a vertical menu inside of a off-canvas which is triggered from a menu-icon button contained within a title-bar. It all works perfectly except that when triggered there is a blue line beneath the first link. I have investigated it extensively in the css but cannot get it to not appear. I wonder if perhaps it is something to do with browser accessibility? I would like the blue line not to appear.
can you provide a screenshot and more details?
Do you mean the focus ring? This should not be removed.
This is how it appears when the off-canvas is triggered.
And this is my code – sorry, as a new user I am allowed only one image per post.
<body> <div class="grid-container"> <div class="grid-x grid-padding-x"> <div class="large-12 cell"> <div class="title-bar"> <div class="title-bar-left"> <button class="menu-icon" type="button" data-open="offCanvas"></button> <span class="title-bar-title">Book site</span> </div> </div> <div class="off-canvas-wrapper"> <div class="off-canvas-absolute position-top" id="offCanvas" data-off-canvas> <ul class="vertical menu"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About the book</a></li> <li><a href="contents.html">Contents</a></li> <li><a href="specification.html">Specification</a></li> <li><a href="images.html">Images</a></li> </ul> <button class="close-button" aria-label="Close menu" type="button" data-close> <span aria-hidden="true">×</span> </button> </div> <div class="off-canvas-content" data-off-canvas-content> <img src="img/m72-colour-bars.png" alt="m72-colour-bars" width="1200" height="90"> <img src="img/IMG_7543.jpg" alt="IMG_7543" width="1200" height="800" >
It seems the code snippet is not complete. Can you provide a working codepen and mention the Foundation version that you use?
I guess I saw this bug in older versions (latest is 6.6.1) and in most cases it should be the focus ring which is needed for the accessibility.
Thanks for your patience. I upgraded to 6.6.1 and although I was not a CodePen user I built my component in CodePen and although it had other problems due, I am sure, to me being a new user I was able to fix the navigation menu. My code now runs as it should. Thank you.
Thanks for the feedback. Closing as resolved.