Off-canvas menu issue

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.

Hi,

can you provide a screenshot and more details?
Do you mean the focus ring? This should not be removed.

Daniel hi

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">&times;</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.

Daniel
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.

Malcolm

Thanks for the feedback. Closing as resolved.