I was really unsure what to title this question so I think the best way to explain is with a snippet:
$(document).ready(function () {
$(".navbar-toggle").on("click", function () {
$(".navbar").toggleClass("open");
$(".navbar-toggle").toggleClass("open");
});
});html {
font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: normal;
color: #888;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
margin: 0;
padding: 0;
font-weight: normal;
}
a {
text-decoration: none;
color: inherit;
}
button {
border: none;
-webkit-appearance: button;
cursor: pointer;
}
.navbar {
background: rgba(255, 236, 176, 0.97);
color: #555;
line-height: 50px;
display: none;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
}
.navbar-fixed {
position: fixed;
top: 0;
}
.navbar-brand {
display: inline-block;
padding: 0 15px;
}
.navbar-mobile {
background: #ffecb0;
position: fixed !important;
top: -100%;
display: block;
height: 275px;
width: 100%;
overflow-y: auto;
opacity: 0.0;
transition: .3s ease
}
.navbar.open {
opacity: 1.0;
top: 0;
}
.navbar-mobile .container {
padding: 0;
}
.navbar-toggle {
background: #ffecb0;
position: fixed;
display: block;
top: 10px;
left: 15px;
padding: 9px 10px;
border-radius: 5px;
z-index: 100;
background-image: none;
outline: none;
}
.navbar-toggle .icon-bar {
background-color: #555;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
transition: .3s ease;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
.navbar-toggle.open .icon-bar:first-child {
transform: translate(0, 6px) rotate(225deg);
}
.navbar-toggle.open .icon-bar:nth-child(2) {
opacity: 0;
}
.navbar-toggle.open .icon-bar:last-child {
transform: translate(0, -6px) rotate(135deg);
}
nav ul {
list-style: none;
text-align: center;
}
nav a {
position: relative;
display: block;
font-size: 16px;
font-weight: 500;
}
nav li a:hover {
color: black;
background-color: #ffe389;
}
nav li a.active {
color: white;
background-color: #847d64;
}
.btn {
}
.navbar-button {
color: #fff;
display: inline-block;
border-radius: 5px;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
transition: .3s;
background-color: #a48eff;
border-color: #8c6aff;
line-height: 1;
padding: 10px 10px;
margin: 0 15px;
}
.navbar-button:hover {
background-color: #b9a8ff;
color: white;
border-color: #ad94ff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggle" type="button" role="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="navbar navbar-mobile">
<div class="container">
<a href="test.html" class="navbar-brand"></a>
<div class="navbar-items">
<ul>
<li><a href="test.html" class="active">Home</a></li>
<li><a href="test2.html">Link 2</a></li>
<li><a href="test3.html">Link 3</a></li>
<li><a class="button navbar-button" href="contact.html">Call to Action</a></li>
</ul>
</div>
</div>
</nav>As you can see I have a mobile navbar collapse/expand button which is working fine. But for some reason, only in Mac OS Safari, when the button is clicked something is getting selected and the blue highlight is appearing.
I have no idea what is causing this and I've tried a few different ideas to fix it. As you can see I tried adding onfocus="blur()" to the button but that didn't work. I also tried adding user-select: none; to the button and also the span tags inside but that didn't work either.
It's not a massive issue because usually this button will only be visible when the user is looking at my website on their phone and the problem doesn't occur there. But it is really irritating me and I'd like to fix it so any help is greatly appreciated :)
Thanks in advance.
UPDATE
Thank you for all your answers. The solution you have all given is to add .navbar-toggle {outline: 0;} or outline: none; or some variation of this. But this isn't working for me. In fact, all your snippets still have the same problem when I view them. Any idea why I'm not seeing the same result as you guys?
Just to be clear about the behaviour I am seeing, here is a screenshot of Dev_NIX's snippet running after I have just opened and closed the nav menu by clicking the button:
ANOTHER UPDATE
I've tried running this code snippet from another version of Safari on another Mac and there is no issue! So I guess it must just be some strange bug with my version of Safari (9.1). So the problem hasn't been solved but it seems to be unique to me so I'm not gonna worry about it any longer :)
Thanks again for all your answers!
