One interesting aspect of Bookdown is its built-in feature that automatically highlights in blue the section in the sidebar that you are currently scrolling past or reading. However, I'm having trouble changing the color in the style.css page. Using a:link completely removes the scroll highlight feature.
/*style.css*/
/* Styling the sidebar */
.sidebar {
width: 200px;
float: left;
border-right: 1px solid #ddd;
}
.nav {
list-style-type: none;
padding: 0;
}
.nav-link {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
.nav-link:hover {
background-color: #f0f0f0;
}
/* Custom style for active link */
.nav-link.active {
background-color: #007bff; /* blue highlight background */
color: #ffffff; /* Text color when active */
font-weight: bold; /* Optional: Make the text bold*/
}
/*Main content area*/
.content {
margin-left: 220px;
padding: 20px;
} <div class="bookdown">
<div class="sidebar">
<ul class="nav">
<li><a href="#section1" class="nav-link">Section 1</a></li>
<li><a href="#section2" class="nav-link">Section 2</a></li>
<li><a href="#section3" class="nav-link active">Section 3</a></li>
<li><a href="#section4" class="nav-link">Section 4</a></li>
</ul>
</div>
<div class="content">
<h1 id="section1">Section 1</h1>
<p>Content for section 1.</p>
<h1 id="section2">Section 2</h1>
<p>Content for section 2.</p>
<h1 id="section3">Section 3</h1>
<p>Content for section 3.</p>
<h1 id="section4">Section 4</h1>
<p>Content for section 4.</p>
</div>
</div>The sidebar consists of a list of links <ul class="nav"> where one is marked with the active class.
The sections of the page are contained within the content div.
.nav-link styles the appearance of sidebar links.
.nav-link.active customizes the active link, changing its colors to blue #007bff and white #ffffff. You can modify these shades as needed.
Does anyone know how to enable hinting for voting arrows on StackExchange using Pentadactyl (a fork of Vimperator)? I've tried removing my .pentadactylrc file and restarting Firefox, but still can't figure out how to upvote questions and answers ...
Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...
I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...
Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...
Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...
UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...
https://i.stack.imgur.com/bitod.png In comparing this particular fiddle with another version of the same fiddle, the only variance is that in the second one, there is </label><label for="address_zip" class="zip"> without a line break following ...
Currently, I am in the process of merging my CSS and JS files before minifying them with the YUI compressor. My web application functions perfectly when each file is linked individually. Now, I am attempting to combine all the files into one single CSS fi ...
GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...
I'm attempting to modify the Highcharts tooltip for a stacked column chart in order to have the arrow on the tooltip point to the center of the bar. I understand that I can utilize the positioner callback to adjust the tooltip's position, but it ...
The client initiates an AJAX call via jQuery. Upon fetching data from the database, I return the response which includes the application of numerous classes and styles to various HTML tags. Unfortunately, this process results in code that appears unsightly ...
Is there a way to create a page layout with inline-block elements that are vertically aligned to the top and fold into open space like floated elements do when placed below another set of inline block elements? It seems as though they follow row-like rules ...
My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...
I need to center my text precisely on top of my background image without resorting to the use of relative or absolute positioning. Many solutions online rely on using absolute positioning for the text along with a specified top value, but I prefer not to e ...
I have a setup that looks something like the following: <div> <div id="scrollID" style="height:100px;"> content here </div> </div> <script> document.getElementById("myDIV").addEventListener("touchstart", m ...
Can a Base64 encoded image be loaded as a background image URL without exposing the actual encoded string in the page source? For example, if a Node API is used to GET request at "/image", it returns the serialized Base64 data. res.json("da ...
I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...
In my app, I have a basic colored button that needs to change its color depending on the UI state: const StyledButton = styled.button` & { border: 0; color: white; cursor: pointer; } &:hover { background-color: ${(props) => ...
I am currently in the process of creating a modal tabbed pane in bootstrap following the instructions provided in this guide. You can view the code and functionality on this fiddle. $(document).on("click","#tabs a",function(event) { alert("!!!"); ...
Is there a way to dynamically change the content of a div upon clicking on a menu item? Here is the current layout for reference: https://i.stack.imgur.com/nOnlQ.png Below is the CSS and HTML code snippet: body { background-color: #555657; ...