CSS/html Change Link font

Question

I just want to know where here should I change so the font of the "Navigate" which leads to sidebar would be the same as the other three menu button. This is the screenshot https://snag.gy/AnGs58.jpg As you can see, "navigate" font is different and i really dont know which part to change.

 /*stylesheet for Negros Occ Central Tourisn Website */ body { margin: 0px; background-image: url(bg.jpg); background: no-repeat center center cover; } #header { background: rgba(0, 0, 0, 0.5); color: white; font-size: 30px; padding: 16px; margin-top: 20px; } #header>#name { font-family: Caviar Dreams; float: left; } #footer { width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 32px; position: fixed; bottom: 0px; } #footer>p { margin: 8px; color: white; font: 12px arial; text-align: right; } /* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: rgba(7, 50, 4, 0.8); overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 100px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ font-family: Caviar Dreams; } /* The navigation menu links */ .sidenav a { margin-top: 10px; padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: white; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus { color: #245009; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; margin-top: 20px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } .button { background-color: #171817; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 0px; float: left; } .button:hover { box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } #menu a, #menubutton a { text-decoration: none; color: white; text-transform: uppercase; font-family: Caviar Dreams; font-size: 13px; } @media only screen and (min-width:600px) { #menu { float: right; display: block; } .menuitem { display: inline; } .menuitem+.menuitem { border-left: 1px solid white; margin-left: 8px; padding-left: 8px; } #menubutton { display: none; } } @media only screen and (max-width:599px) { #menubutton { display: inline; float: right; } #menu { position: absolute; top: 48px; right: 0px; background: black; padding: 16px; } .shownmenu { display: block; } .hiddenmenu { display: none; } .menuitem { display: block; } .menuitem+.menuitem { margin-top: 8px; } } .clear { clear: both; } .content {} 

 <div id="header"> <div id="name">Negros Occidental Tourism Desk</div> <div id="menubutton"><a id="menulink" href="#">Menu</a></div> <div id="menu" class="hiddenmenu"> <button class="button"><div class="menuitem"><span onclick="openNav()">Navigate</span></div></button> <button class="button"><div class="menuitem"><a href="#">Tourist Spots</a></div></button> <button class="button"><div class="menuitem"><a href="#">All Festivals</a></div></button> <button class="button"><div class="menuitem"><a href="#">About NIR</a></div></button> </div> <div class="clear"></div> </div> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">District 1</a> <a href="#">District 2</a> <a href="#">District 3</a> <a href="#">District 4</a> <a href="#">District 5</a> <a href="#">District 6</a> <a href="#">Bacolod City</a> <a href="#">Negros Oriental</a> </div> <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page --> <div id="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="footer"> <p>Copyright 2017</p> </div> 

Thank you all!

Answer 1

Change your span to a :

<div class="menuitem"><span onclick="openNav()">Navigate</span></div>

Replace it to:

<div class="menuitem"><a onclick="openNav()">Navigate</a></div>

Answer 2

You can use @cosmoonot answer or If you want to use <span> instead of <a> use this

.menuitem > span {
   font-family: Caviar Dreams;
}