Greetings, Sebastian Bosch!
Please ensure to test the code on your local machine to confirm if it produces the desired outcome (as viewing on Stack Overflow may be challenging):
.btn-notliked {
background-color: transparent;
color: black;
outline: none;
border: none;
}
.btn-liked {
background-color: transparent;
color: #283593;
border: none;
outline: none;
cursor: pointer;
padding: 0;
}
...
/* Additional CSS code snippets omitted for brevity */
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-2">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar z-depth-3">
<ul class="nav nav-pills flex-column">
...
</ul>
</nav>
</div>
<div class="col-md-10">
<div class="row">
...
</div>
</div>
</div>
To achieve the desired effect on your website, consider these two adjustments:
1. Utilize Z-index to position the navbar behind the sidebar. This may cause slight misalignment of the menu button, which can be fixed with padding.
2. Adjust the margin of the navbar to prevent overlapping with the sidebar.
The provided solution combines both approaches effectively.
The key modification is highlighted in line 153:
.navbar {
border-top: 3px solid #283593;
margin-left: 16.7%;
width:83.8%;
z-index: -1
}
By setting the margin-left to 16.7%, the navbar stays clear of the sidebar. However, you may encounter a slight overlap issue due to Bootstrap behavior. The negative z-index ensures the navbar remains positioned behind the sidebar.
Hopefully, this guidance steers you in the right direction and provides insight into resolving the issue. Should you require further assistance, feel free to reach out. Wishing you a productive day ahead!