I want brackets around my navigation links only on desktop/computer screen and not on mobile. In my code the right bracket (nav-link:hover::after) is working. But the left bracket (nav-link:hover::before) is to close to the link.
Please watch my snipped in full mode!!
Here is my code:
window.onload = function() {
/* Burger menu toggle nav */
const topNav = document.getElementById("myTopnav");
const burgerMenu = document.getElementById("burgerMenu");
burgerMenu.addEventListener("click", () => {
topNav.classList.toggle("responsive");
burgerMenu.classList.toggle("toggleMenu");
});
};/***********************************************
TEMPLATE CONTAINER
***********************************************/
.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: 0.1fr 1fr 1fr 1fr;
grid-template-areas:
"nav"
"header"
"main"
"footer";
}
nav {
grid-area: nav;
background-color:blue;
}
header {
grid-area: header;
background-color: darkcyan;
}
main {
grid-area: main;
background-color: chocolate;
}
footer {
grid-area: footer;
background-color: cornflowerblue;
}
/***********************************************
Navbar
***********************************************/
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
background-color: #2c2c2c;
z-index: 1;
}
#burgerMenu {
float: right;
padding: 28px 15px 15px 15px;
}
.dot-arrow {
padding-right: 10px;
}
.topnav a {
display: none;
color: white;
text-decoration: none;
font-size: 20px;
}
.topnav.responsive .icon {
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
.topnav.responsive a {
display: block;
float: none;
padding: 16px 0px;
}
.responsive {
margin-top: 28px;
padding: 0 0 10px 20px;
background-color: #161616;
}
.toggleMenu {
content:url("/images/svg/menu-close.svg");
width: 32px;
height: 32px;
}
.nav-item {
display: inline;
padding: 0 10px 10px 10px;
font-size: 1.5rem;
color: white;
text-transform: uppercase;
text-shadow: 10px 0px 20px $primary,
10px 0px 20px $primary;
}
.nav-link {
text-decoration: none;
}
.dot-arrow {
padding-right: 10px;
}
.navbar-brand {
font-family: "Smooch Sans", serif;
color: white;
text-decoration: none;
font-size: 2.2rem;
text-shadow: 10px 0px 20px $primary,
10px 0px 20px $primary;
}
.logo-brand-wrapper {
display: inline;
}
.brand-logo {
padding: 25px 5px 0px 15px;;
text-shadow: 1px 1px 2px black,
0 0 25px $primary,
10px 0px 20px #004f7c;
}
.brand-name {
color: $primary;
}
.nav-link:link {
color: white;
text-decoration: none;
}
.nav-link:visited {
color: white;
}
.nav-link:hover {
color: white
}
.nav-link:active {
color: white;
}
.nav-link:hover::before {
content: "[";
display: none;
color: $primary;
}
.nav-link:hover::after {
content: "]";
display: none;
color: $primary;
}
/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.nav-item {
font-size: 0.8rem;
}
.topnav.responsive a {
padding: 5px 0px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.topnav.responsive a {
padding: 5px 0px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* TEMPLATE CONTAINER */
.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"nav nav nav"
"main main main"
"footer footer footer";
}
/* NAVBAR */
.topnav {
float: right;
padding: 20px;
}
.topnav a {
display: inline;
font-size: 1.3rem;
}
#burgerMenu {
display: none;
}
.brand-logo {
padding: 13px 5px 0px 15px;
width: 30px;
height: 30px;
}
.navbar-brand {
font-size: 2.3rem;
}
.dot-arrow {
display: none;
}
.nav-link:hover::before {
display: inline;
position: absolute;
}
.nav-link:hover::after {
display: inline;
position: absolute;
}
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}<nav>
<!-- Logo and Brand -->
<div class="logo-brand-wrapper">
<a href="#">Home</a>
<!-- Burger Menu -->
<a href="#" id="burgerMenu" class="icon">
<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M20 7L4 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 12L4 12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 17L4 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
</svg>
</a>
</div>
<!-- Top Navigation Menu -->
<ul class="topnav" id="myTopnav">
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Logos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Sketeches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Phots</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Tut</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Contact</a>
</li>
</ul>
</nav>Hope someone can help me, thanks.
The issue come from your position: absolute; on your ::before and ::after. Adding position: relative; to your .nav-item (parent) and adjusting with left / right allow to place the brackets correctly.
I also added the brackets as content values.
Here is your snippet with the modification :
/***********************************************
Navbar
***********************************************/
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
background-color: #2c2c2c;
z-index: 1;
}
#burgerMenu {
float: right;
padding: 28px 15px 15px 15px;
}
.dot-arrow {
padding-right: 10px;
}
.topnav a {
display: none;
color: white;
text-decoration: none;
font-size: 20px;
}
.topnav.responsive .icon {
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
.topnav.responsive a {
display: block;
float: none;
padding: 16px 0px;
}
.responsive {
margin-top: 28px;
padding: 0 0 10px 20px;
background-color: #161616;
}
.toggleMenu {
content: url("/images/svg/menu-close.svg");
width: 32px;
height: 32px;
}
.nav-item {
display: inline;
padding: 0 10px 10px 10px;
font-size: 1.5rem;
color: white;
text-transform: uppercase;
text-shadow: 10px 0px 20px $primary,
10px 0px 20px $primary;
}
.nav-link {
text-decoration: none;
}
.dot-arrow {
padding-right: 10px;
}
.navbar-brand {
font-family: "Smooch Sans", serif;
color: white;
text-decoration: none;
font-size: 2.2rem;
text-shadow: 10px 0px 20px $primary,
10px 0px 20px $primary;
}
.logo-brand-wrapper {
display: inline;
}
.brand-logo {
padding: 25px 5px 0px 15px;
;
text-shadow: 1px 1px 2px black,
0 0 25px $primary,
10px 0px 20px #004f7c;
}
.brand-name {
color: $primary;
}
.nav-link:link {
color: white;
text-decoration: none;
}
.nav-link:visited {
color: white;
}
.nav-link:hover {
color: white
}
.nav-link:active {
color: white;
}
.nav-link:hover::before {
content: "[";
display: none;
color: $primary;
}
.nav-link:hover::after {
content: "]";
display: none;
color: $primary;
}
/* X-Small devices (portrait phones, less than 576px)
No media query for xs since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.nav-item {
font-size: 0.8rem;
}
.topnav.responsive a {
padding: 5px 0px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.topnav.responsive a {
padding: 5px 0px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* TEMPLATE CONTAINER */
.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"nav nav nav"
"main main main"
"footer footer footer";
}
/* NAVBAR */
.topnav {
float: right;
padding: 20px;
}
.topnav a {
display: inline;
font-size: 1.3rem;
}
#burgerMenu {
display: none;
}
.brand-logo {
padding: 13px 5px 0px 15px;
width: 30px;
height: 30px;
}
.navbar-brand {
font-size: 2.3rem;
}
.dot-arrow {
display: none;
}
.nav-item {
position: relative;
}
.nav-link:hover::before {
content: "[";
display: inline;
color: #primary;
position: absolute;
left: -2px;
/* Adjust for left position */
}
.nav-link:hover::after {
content: "]";
display: inline;
color: #primary;
position: absolute;
right: 2px;
/* Adjust for right position */
}
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}<nav>
<!-- Logo and Brand -->
<div class="logo-brand-wrapper">
<a href="#">Home</a>
<!-- Burger Menu -->
<a href="#" id="burgerMenu" class="icon">
<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M20 7L4 7" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 12L4 12" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> <path d="M20 17L4 17" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/> </g>
</svg>
</a>
</div>
<!-- Top Navigation Menu -->
<ul class="topnav" id="myTopnav">
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Logos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Sketeches</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Phots</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Tut</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ .URL }}">Contact</a>
</li>
</ul>
</nav>