My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed.
My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed.
Your .footer-nav nav ul li a:hover padding is causing the issue:
.footer-nav nav ul li a:hover {
background-color: #111;
//padding: 5px;
}
To fix this, you can either add padding to the .footer-nav nav ul li or remove it (as shown above) when :hover is triggered. If you want padding on all items consistently:
.footer-nav nav ul li a {
padding: 5px;
}
Initially, there is a colon missing in the fiddle code, leading to improper functioning.
.footer-nav nav ul li a:{
display: block;
padding: 8px;
background-color: #dddddd;
}
Secondly, ensure consistent padding for "a" in both regular and :hover states to avoid jumping.
Third point - no necessity to set "a" as block element.
Lastly, incorporate transitions for smoother effects.
.footer-nav nav ul li a:hover {
background-color: #111;
padding: 8px;
transition: all ease-in .3s;
-webkit-transition: all ease-in .3s;
-moz-transition: all ease-in .3s;
-o-transition: all ease-in .3s;
}
.footer-nav nav ul li a {
display: block;
padding: 8px;
background-color: #dddddd;
transition: all ease-in .3s;
-webkit-transition: all ease-in .3s;
-moz-transition: all ease-in .3s;
-o-transition: all ease-in .3s;
}
Give this a shot:
footer{
width: 100%;
background-color: #222;
height: 150px;
margin-top: 50px;
}
.center-footer{
text-align: center;
}
.footer-nav nav ul li{
display: inline-block;
padding: 5px;
font-size: 18px;
padding-top: 27px;
margin-right: 15px;
}
.footer-nav nav ul li a:hover {
background-color: #111;
padding: 5px;
}
.footer-nav nav ul li a{
display: block;
padding: 5px;
background-color: #dddddd;
}
Having an issue with the HTML select element. I am trying to create a dropdown select that displays two different prices based on location. For example, when selecting country (Australia) and city (Canberra or Sydney), I want to display prices for 30 days ...
Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...
I'm currently working on implementing a hover effect for an SVG rect embedded in HTML. The transition I've set up is not smooth, and the opacity values seem to be inconsistent during the animation. My browser of choice is Firefox. The rect I&apo ...
I currently have SPA applications developed with angularjs, but I am in need of creating an installer that allows users to work offline using a secure local database. I experimented with IndexedDB and converted my SPA into a Chrome extension, however, I di ...
I've been developing this website using React and Material UI, and I chose to implement standard CSS for styling. However, after closing my code editor and reopening it, some parts of the CSS do not seem to be loading properly. I'm completely puz ...
Utilizing a foreach loop to store error messages from invalid user inputs in an array, converting it into a string, and displaying them on another page. However, although the string is successfully displayed, it appears multiple times. This snippet showca ...
Is there a way to make the li elements horizontal in this pagination setup? I've attempted display: inline and display: float, but neither seem to be working for me. <ul class="pagination" style="display:inline; text-align: center; margin:0;">& ...
Looking for a way to display small markers on the scrollbar of an overflow: scroll element, similar to features found in IDEs and text editors like this one: https://github.com/surdu/scroll-marker. I've considered using a pointer-events: none overlay ...
I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...
How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...
I'm in the process of creating a table with subcategories and headers that resembles the image provided below: Here's what I've come up with so far: <table> <thead> <tr> <th>Item</th> & ...
After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...
I am working on a project that involves a div element with the class "jumbotron" which currently has a background image applied to it. Additionally, I have a menu consisting of 6 items that I would like to interact with. My goal is to dynamically change ...
I'm having an issue with displaying images in a div table. Each image has a border at the bottom, which is around 2-5 pixels wide. Unfortunately, as a new user, I am unable to send any images. My main goal is to remove this unwanted border from the ...
creating white space between the green div and both the top and sides of the screen This is my index page export default function Home() { return( <div className = {stylesMain.bodyDiv}> <div>home</div> &l ...
JavaScript: $(document).ready(function() { window.history.replaceState({some JSON}, "tittle", aHref); $(window).bind("popstate", function(){ alert("hello~"); }); }); Upon the initial loading of the www.example.com page, the above JavaScript code is ex ...
I have been working on creating a 'captcha' for my website, and this is the code I am using: <form class="captcha" method="post"> <label><?php echo $captchas ?></label><br> <input name="captcha" /> <input t ...
I am working on a project similar to the functionality of this website: As you can see, when you click on any video, it takes you to the same page with the video playing being the only difference. I want to implement this feature on my website as well. ...
I have a request regarding the tables within the #middlebox. I would like to be able to rearrange the table positions by clicking on the list items. For instance, if the current order of the tables is starter -> soup -> seafood, clicking on the #seafood_li ...
We are currently using Wordpress for our responsive website. Within the site, we have integrated Marketo forms (a marketing automation system) with custom CSS for styling. The issue we are facing is that while the forms appear fine on desktops, they cause ...