Is there a way to ensure that the hover background-color covers the full height of the navigation bar, including the text padding?
I am aiming for this kind of effect.
Any tips on what I may be overlooking? Much appreciated!
Is there a way to ensure that the hover background-color covers the full height of the navigation bar, including the text padding?
I am aiming for this kind of effect.
Any tips on what I may be overlooking? Much appreciated!
Check it out! I've put together a jsfiddle just for you. It's looking great:
New and improved CSS:
<style>
.fa {
font-size: 20px;
margin-top: -15px;
margin-bottom: -15px;
}
.navbar-height {
height: 70px;
}
.clearboth {
clear: both;
}
/* Update workbar styles */
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
background: #FFF;
text-align: center;
height: 75px;
margin: 0 auto;
width: 100%;
}
.workbar {
text-align: center;
margin: 0 auto;
background-color: #ffcccc;
}
.worknav {
list-style: none;
padding-left: 10px;
margin: 0 auto;
text-align: center;
}
.worknav> li {
text-align: center;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
.worknav> li:hover a {
color: orange;
}
.worknav>li:hover {
background-color: gray;
}
.worknav > li > a {
text-decoration: underline;
color: #333;
}
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
.worktop {
margin-top: 80px;
}
</style>
For those wanting to add color to both the padding and text, consider using this code:
a:hover{
background-color:blue;
color:green;
}
Make sure to customize the CSS for Anchor links as follows:
.worknav > li > a {
text-decoration: none;
display:inline-block;
color: #666;
line-height:65px;
}
For reference, you can view the implementation at http://jsfiddle.net/kka284556/cRjF4/9/
One way to achieve this is by adding padding to the anchor tag instead of using height on the ul and li tags. Additionally, you can apply a background color to the anchor for styling.
This approach should work well. If you'd like, I can provide some sample code for implementation. Just let me know!
One effective solution involves utilizing the line-height CSS property. When the height of the background and the line-height of the font-size are equal, the background color will fill the entire height.
Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...
Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...
I am faced with a challenge on my webpage where I need to adjust the height due to scrolling elements, while also detecting the scrollTop() distance to apply some CSS to the navigation bar. Despite setting the body's height to 100%, it appears that I ...
Can I apply this syntax to inherit a class in SASS? Code .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } Output .message, .success, .error, .warning { border: 1px solid # ...
In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...
I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play. After reading several similar discussions, I understand that you can manipulate elements with JavaScript once the ...
I need to divide each row into 3 columns image : https://i.sstatic.net/4phtb.jpg <div id="list-product"> <div class="row"> @foreach($products as $product) <div class="col-lg-4 ...
This section was designed using Bootstrap and displayed as flex. However, some items seem to have extra space: My goal now is to remove the extra space underneath the items like this: Smaller items will now be resized to match the larger items, elimi ...
I'm facing an issue with displaying a list in a dropdown multiple using LocalStorage. The problem arises after saving data to LocalStorage and then going back to my modal. The saved list does not show up in the dropdown. I simply want to display the l ...
Within the context of my website development project at , I am utilizing a script for infinite scrolling to consolidate multiple pages into one seamless scrolling experience. I am seeking a solution to hide the loader (the spinning icon) when no additiona ...
Recently, I tackled the challenge of building a website based on a specific design. Within this design, there was a div element that included an image link. Despite my efforts, I found myself at a loss on how to proceed with this task. Here is the snippet ...
Is it possible to modify the WordPress menu dropdown behavior from hover to onclick? I want the menu to appear when an item is clicked, but WordPress currently requires hovering. Below is what I've tried so far, but it has not been successful. Jquery ...
I am currently in the process of developing a web application that will manage items within a list. Previously, I used buttons with event listeners and JavaScript functions to handle editing and deleting items. However, I am now transitioning towards build ...
I'm having issues with my popover content always displaying the first item in the list. How can I make it display each individual item? Below is the snippet of Razor HTML code I am using: @{ foreach(item in Model.SomeObject) { <div clas ...
I'm having an issue with two buttons located next to each other. The first button opens a modal with the data-target of #myModal, but when I click on the second button with the data-target of #largeModalTwo, it only dims the screen without opening any ...
Here is an example of a form: <form method="post"> {% csrf_token %} <input class="search" type="text" name="q" placeholder="Search Engine"> <input type="submit"> I am looking t ...
Within this flex element, I have set flex: column wrap; and max-height: 150px;. The issue I'm facing is that justify-content doesn't seem to be working. However, when I switch to using height: 150px, the alignment works fine. This problem arises ...
I am currently in a 14-day internship where I am tasked with redesigning webpages. The pages are designed to display links to files in a folder that can be downloaded by clicking on them. Is there a way to change the style of this page using an external C ...
I am facing an issue where I need to change the class of a span child using a toggle feature when clicking on a browser row. The problem arises when there are multiple rows, as the span cannot be found and the functionality does not work properly. I have ...
Here is the HTML code I am working with: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33545c5446734a525b5c5c1d505c5e">[email protected]</a> wants to be your partner. Do you agree? <br><input type="but ...