turn div into link on mobile screen size - html

Question

I have a navbar with some links. When I open the page with a small screen size a mobile menu replaces the default navbar.
When I open this mobile menu I want to turn the parent divs of the links into links too. Means when I click on this div I want to call the links route.
I provide a full working example of the mobile menu
$(document).ready(() => {
$("#btnMenu").click(() => {
toggleMenu();
});
$(".navbarLink").click(() => {
if ($("#navbarItems").hasClass("activeNavbar")) {
toggleMenu();
}
});
});
function toggleMenu() {
$("#navbarItems").toggleClass("activeNavbar");
toggleMenuBtn();
}
function toggleMenuBtn() {
$("#btnMenu").toggleClass("activeMenuBtn");
}
.link {
text-decoration: none;
}
body {
margin: 0;
}
#navbar {
height: 60px;
top: 0;
padding-left: 200px;
padding-right: 200px;
position: sticky;
background: #1e222a;
}
#navbarItems {
height: 100%;
display: flex;
align-items: center;
}
#logoLink {
display: flex;
align-items: center;
}
#navbarItems .navbarItemContainer:not(:first-child) {
margin-left: 30px;
}
.navbarItemContainer {
background: #1e222a;
}
.navbarLink {
font-weight: bold;
color: #ffffff;
}
.navbarLink:hover {
color: #3abcf3;
}
#btnMenuContainer {
height: 100%;
display: none;
}
#btnMenu {
cursor: pointer;
}
.menuBtnBar {
width: 35px;
height: 5px;
margin: 6px 0;
background-color: #ffffff;
transition: 0.4s;
}
.activeMenuBtn #barTop {
transform: rotate(-45deg) translate(-9px, 6px);
}
.activeMenuBtn #barCenter {
opacity: 0;
}
.activeMenuBtn #barBottom {
transform: rotate(45deg) translate(-8px, -8px);
}
#media(max-width: 1200px) {
#navbar {
padding-left: 150px;
padding-right: 150px;
}
}
#media(max-width: 1100px) {
#navbar {
padding-left: 0;
padding-right: 0;
}
#navbarItems .navbarItemContainer:not(:first-child) {
margin-left: 0;
}
#navbarItems .navbarItemContainer:not(:last-child) {
border-bottom: 1px solid #676767;
}
#btnMenuContainer {
display: flex;
align-items: center;
}
#btnMenu {
margin-left: 20px;
}
#navbarItems {
margin-left: 0;
display: none;
}
#logoLink {
display: inline-block;
}
.navbarItem {
width: 100%;
text-align: center;
padding: 30px 0;
}
#navbarItems.activeNavbar {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<div id="btnMenuContainer">
<div id="btnMenu">
<div id="barTop" class="menuBtnBar"></div>
<div id="barCenter" class="menuBtnBar"></div>
<div id="barBottom" class="menuBtnBar"></div>
</div>
</div>
<div id="navbarItems">
<div class="navbarItemContainer">
<div class="navbarItem">
<a id="logoLink" class="link navbarLink" href="#">
<img class="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Hat-Mario-icon.png">
</a>
</div>
</div>
<div class="navbarItemContainer">
<div class="navbarItem">
<a class="link navbarLink" href="#sectionTwo">
Link 2
</a>
</div>
</div>
<div class="navbarItemContainer">
<div class="navbarItem">
<a class="link navbarLink" href="#sectionThree">
Link 3
</a>
</div>
</div>
</div>
</div>
How can I expand the link in the center on its whole parent div when opening the mobile menu?

Answer 1

try simply replacing your mobile styles for
.navbarItem {
width: 100%;
text-align: center;
padding: 30px 0;
}
with
#navbarItems:first-child .navbarItem, .navbarLink {
width: 100%;
text-align: center;
padding: 30px 0;
}
this should apply those styles to the logo item as it currently does, and then apply the padding and width to the links themselves for the actual navbar links.

Answer 2

Moving the div into the <A> tag makes the whole space clickable on mobile.
<a class="link navbarLink" href="#sectionTwo">
<div class="navbarItem">
Link 2
</div>
</a>