Sidebar buttons entire width not clickable

HTML-CSS
1

Hi,

I’m working on a sidebar, and I already followed a tutorial and finished the first project. But now, I tried it again but I can’t seem to find the reason why buttons are not working. I tried to create the navbar without looking at the tutorial.

The entire width of the button should be clickable but in my example you can see it’s not happening.

I already set the width to 100% from the .sidebar li and a.

[video-to-gif output image]

HTML

   <nav>
        <ul class="fixedMenu">
            <li class="name"><a href="#">Snack Vis kiosk</a></li>
               <li class="hideFromMobile"><a href="#">Over de kiosk</a></li>
                  <li class="hideFromMobile"><a href="#">Menukaart</a></li>
                     <li class="hideFromMobile"><a href="#">Catering reserveren</a></li>
                        <li class="hideFromMobile"><a href="#">Contact</a></li>
                        <li class="showSidebar"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="#1f1f1f"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></a></li>
        </ul>

        <ul class="sidebar">
            <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="#1f1f1f"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></a></li>
               <li ><a href="#">Over de kiosk</a></li>
                  <li ><a href="#">Menukaart</a></li>
                     <li ><a href="#">Catering reserveren</a></li>
                        <li ><a href="#">Contact</a></li>
                        
        </ul>


    </nav>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh; /*vergeten*/
    background-image: url(fries.JPG);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: Edu NSW ACT Foundation;
    
}

/*START Nav*/
nav {
    background-color: #8D4545;
    font-size: 2em;
    font-family: Knewave;
   
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content:flex-end ;
    align-items: flex-end;
}

nav li {
    list-style: none;  
}

.fixedMenu  li:first-child {
    margin-right: auto;
}

nav a {
    text-decoration: none;
     color: white;   
}

nav li:hover {
    background-color: rgb(52, 103, 255);
    transition: 1s;
}

.hideFromMobile {
    display: none;
}

.name {
    font-size: 1em;
    padding-left: 1em;
}

.showSidebar a {
    padding-right: 0.5em;
    padding-left: 0.5em;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 320px;
    border: 1px solid black ;
    position: fixed;
    height: 100vh;
    z-index: 999;
    right: 0;
    top: 0;
    background-color:#8D4545 ;
   
}

.sidebar li {
    width: 100%;
     padding-right:10px;
    padding-left: 10px;

}

.sidebar a {
    width: 100%;
  
}




/*END Nav*/

/*START Main*/

.flexContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.intro h1 {
    margin-bottom: 10px;
    font-size: 1.6em;
     background-color: white;
      border-radius: 0.5em;
     padding: 0.2em;
}
.intro p {
    background-color: rgb(255, 255, 255);
    border-radius: 1em;
    padding: 10px;
    width:330px;
    text-align: center;
    margin-bottom: 10px;
}

.imgCrop {
    border-radius: 2em;
    width:350px;
    height:350px;
    background-image: url(Henk.jpg);
    background-size: cover;
    box-shadow: 0 0 20px 10px  rgba(255, 255, 255, 0.767);
}

.TimeAndPhone {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items:flex-start ;
    background-color: white;
    border-radius: 1em;
    width: 345px;
    padding: 5px;
}

.openingstijden {
    text-align: center;
}
.openingstijden h2 {
    margin-bottom: 10px;
}

.TimeAndPhone {
    text-align: center;
}
.TimeAndPhone h2 {
     margin-bottom: 10px;
}
2

Try putting the anchor tags around the li tags instead of the way you have them nested now.

3

Thank you it worked but I’m not sure it’s the proper way of doing that.

I always thought that you must put the anchor element inside a list item? :face_with_monocle: :face_with_spiral_eyes:

4

Hey,
Yes you’re right. Usually it’s better not to put the anchor tags around the li tags.
Another way you can do the same thing:
Try setting display of the a elements to block, that way width:100% is applied. Right now even though you’ve added width:100%;, it’s being ignored because the anchor elements are inline elements and so they only take up the width of their content.
Also, try using the :hover on the anchor elements instead of the li elements.
Happy coding!

1 Like