I attempted to create a vertical navigation bar with a background image, but when I clicked the button, it changed to white. How can I ensure that the buttons stay white? I've experimented with primary-outline options I found through my search, but they haven't been successful.
Have you experimented with creating pseudo classes for your button or link component?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}
I managed to figure this out on my own. The issue was with the markup I used. I mistakenly added a
tag inside an li element. However, I'm still unsure why this caused a problem. Here is the codepen link for reference:
<div class="paintallblack">
<div class="row">
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<p>In my quest to become proficient in web development and launch my online magazine, I am facing numerous challenges. Who am I? What do I do? In my free time, I enjoy running, writing stories, poems, book reviews, composing music, and drawing. Currently, my focus is on maintaining my health, learning to code, and delving into science-fiction whenever possible.</p>
</div>
</div>
The default style of Bootstrap includes:
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
To override this style and make the border color #fff instead of transparent, use the following code:
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}
I recently attempted to use TailwindCSS on my MacOS system. To install it, I used the command: npm install -D tailwindcss Following that, I generated the configuration file by executing the command: npx tailwindcss init I then proceeded to customize my ...
Hey there! This is my first time navigating through the slick carousel functionality. I'm currently facing a challenge with adjusting the positioning of the arrow within the slider. My goal is to have the arrow displayed at the top level just like the ...
Currently, I am in the process of learning React and have successfully created a flexbox with 6 child containers using the wrap property. Now, I am looking to add animation when the containers wrap onto a new line. I attempted to add a transition animatio ...
Is there a way to find a GIF that can be used as a repeated background on an HTML element, creating the illusion of a seamless block? https://i.sstatic.net/5BKxW.gif (source: opengraphicdesign.com) I am looking for an 80x80 GIF that can be repeated as ...
Why am I unable to apply scroll for the table body with a fixed header using Bootstrap-4? I have used min-height and overflow properties to achieve this, but it doesn't seem to work. Does Bootstrap4 not support scrolling on table bodies? The snippet b ...
I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...
I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...
Trying to create a unique menu that interacts with an iframe and displays text in a separate div upon clicking. Example: • Menu item 1 clicked. • "https://wikipedia.org" loads in the iframe. • Address of the wikipedia page displayed in a diffe ...
How can I get a string containing a new line character to wrap in a table cell? When I attempt to bind it, the text does not break at the new line character as expected. I have attached a screenshot for reference. In the console window, it displays correct ...
I currently have a folder structure that looks like this: https://i.sstatic.net/a4nYD.png My goal is to import base.css into base.html so that it is applied globally: Here is my HTML: <!DOCTYPE html> {% load static %} <html> <head> ...
I'm having trouble displaying an image below my navigation bar. The image I'm trying to display is located at https://i.sstatic.net/8PUa3.png and has dimensions of 234 x 156 px. However, the image appears blurry and only a portion of it can be s ...
I'm facing a challenge with a div that is supposed to occupy the entire initial screen and be floated both left and right. In order to achieve this, I had to set the div to equal 100% so that the floated elements could fully utilize the screen space. ...
I have a question regarding sending an array with values ranging from 1 to 100 on the v-autocomplete item props. However, when scrolling through the list, only numbers up to 40-50 are visible. <template> <v-app> <v-container> ...
I am struggling to implement a fullwidth owl carousel slider on my webpage, but I'm facing issues with getting it to function properly. I suspect there might be a conflict with the current template that I'm using. Here is the step-by-step proce ...
Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...
I was browsing different websites and stumbled upon this amazing background color transition that caught my attention. I really liked it and now I want to create something similar on my own website. Despite my best efforts, I haven't been able to achi ...
I am interested in creating a PDF file from an HTML code that includes the stylesheet rules using PHP. Currently, I am attempting to achieve this with the MPDF library. However, the generated PDF does not resemble the original HTML page. Many elements app ...
Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...
In this example, we can see how Bootstrap handles dismissible alerts: <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidde ...
I am having trouble aligning my columns in the way I want. The image shows that some tables have 3 columns while others have 2, and I would like to align the blue with the blue and the red with the red as shown in the picture: https://i.stack.imgur.com/1bL ...