Anchor does not stretch across full width of the sidebar - css

Question

I'm having an issue with my anchors not covering full width of the sidebar (for instance, 'Search'). I realise that this is because of padding, but I'm not sure how to overcome the issue whilst keeping the padded effect. I have tried to add a class (like, '.no-submenu) on the <li> and did .no-submenu a { margin: 0 -1.5rem; padding: 0 3rem; }, but it only partially solved the problem - my icons were off, they go all the way to the left:
I couldn't find the place online to upload SVG files (my icons are SVG), so I created a minimal example without icons. Icons are handled as background-image on the anchors.
<div class="sidebar">
<nav>
<ul class="menu">
<li id="search">
<a class="sidebar-icon" href="/search/notes/">Search</a>
</li>
<li id="dashboard">
<a class="sidebar-icon">Dashboard</a>
</li>
<li id="notebooks" class="has-submenu">
<div class="menu-item">
<span class="sidebar-icon">Notebooks</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li id="new-notebook"><a class="sidebar-icon" href="/notebooks/create/">New Notebook</a></li>
<li id="view-notebooks"><a class="sidebar-icon" href="/notebooks/">View Notebooks</a></li>
</ul>
</li>
<li id="tags" class="has-submenu">
<div class="menu-item">
<span class="sidebar-icon">Tags</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li id="view-tags"><a class="sidebar-icon" href="/tags/">View Tags</a></li>
</ul>
</li>
<li id="account" class="has-submenu">
<div class="menu-item">
<span class="sidebar-icon">Account</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li id="settings"><a class="sidebar-icon" href="/accounts/settings/">Settings</a></li>
<li id="logout"><a class="sidebar-icon" href="/accounts/logout/">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
#font-face { font-family: "ionicons"; src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
.sidebar {
width: 200px;
height: 100vh;
padding: 1rem 1.5rem;
background-color: #348ceb;
font-family: 'Source Sans Pro';
font-size: 14px;
position: fixed;
box-sizing: border-box;
}
ul {
list-style: none;
}
ul, li {
padding: 0;
margin: 0;
}
li {
padding: 0.5rem 0;
}
.submenu {
display: none;
overflow-y: hidden;
margin: 0 -1.5rem;
background-color: #3287e3;
}
.submenu li:first-child {
padding: 0.1rem 0 0 1.5rem;
}
.submenu li:last-child {
padding: 0 0 0.1rem 1.5rem;
}
.submenu li {
padding: 0.5rem 1.5rem;
}
.menu > li:hover {
background-color: #3287e3;
}
.menu > li {
position: relative;
color: #F9FAFC;
font-weight: bold;
margin: 0 -1.5rem;
padding: 0.5rem 1.5rem;
}
.menu > li > a {
display: block;
color: #F9FAFC;
text-decoration: none;
font-weight: bold;
}
.menu > li > a:hover {
color: white;
}
.submenu > li > a {
display: block;
color: #F9FAFC;
text-decoration: none;
}
.submenu > li > a:hover {
color: white;
}
.submenu > li {
font-weight: normal !important;
}
.arrow {
display: inline-block;
width: 10px;
transition: all 0.5s ease-in-out;
transform-origin: left center;
font-size: 0.5em;
position: absolute;
right: 0.75em;
}
.arrow:after {
content: '\f125';
font-family: 'ionicons';
color: white;
}
.rotated {
transform: rotate(90deg);
transition: transform 0.5s ease;
}
.menu-item {
display: flex;
align-items: center;
}
.menu-item > span:first-child {
flex: 1;
}
.sidebar-icon {
background-repeat: no-repeat;
padding-left: 25px;
}
JS (jQuery):
$(document).ready(function() {
$('.has-submenu').click(function() {
$(this).toggleClass('active');
$(this).children('.menu-item').children('.arrow').toggleClass('rotated');
if ($(this).hasClass('active')) {
$(this).children('.submenu').slideDown("slow");
}
else {
$(this).children('.submenu').slideUp("slow");
}
});
});
How can I overcome the issue?
Here is the demo.
#EDIT:
so, I want this:
but the menu item has to be fully clickable, i.e. you can click on any part of it and it brings you to, say, Search. To see the area it currently covers, right-click on the anchor or inspect the element.

Answer 1

I guess this is what you want:
<li style="padding: 0.5rem 0" id="search">
<a style="width: 100% !important; padding: none" class="sidebar-icon" href="/search/notes/">
<i style="padding-right: 10px">#</i>Search</a>
</li>