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;
}
I'm a newcomer to the world of web development and I have an idea to make stars move across my website. However, I'm concerned about whether this might be too much for a simple website to handle. Is there a way to optimize the code? const canvas ...
Imagine a situation in which a user inputs a keyword into a text field. I am seeking a way to retrieve relevant data from Wikipedia that corresponds to the entered keyword. How can this be accomplished? <form method=POST action=someaction> ...
Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...
I'm having trouble creating a custom tile in SAP that inherits from sap.suite.ui.commons.GenericTile and only displays an icon centered in the middle of the tile. The standard aggregations and properties are causing issues as they position the icon on ...
I've been busy with a React project lately. Instead of adding 'onChange' to each button within the html object like this: <input type='text' onChange={myFunction} /> I'd prefer to include it in the JS code like so: doc ...
After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...
Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...
Having trouble with fixed positioning on webkit browsers. Works fine in Firefox, but can't seem to solve the issue. You can see the problem here: When clicking on a project, a page is loaded using jQuery's .load() function. On this page, there ...
After recently updating my Google Chrome browser, I noticed that some of the fonts are not displaying correctly. Interestingly, they appear fine on other browsers, but the issue only seems to occur in Chrome v32.0.17...76 m. The fonts I used were "Open Sa ...
I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...
Utilizing the default Bootstrap3 CSS files for my project. I've come across an issue where the modal-dialog width is set to 600px by default, while I require it to be 1000px for my screen size. Regardless of the screen size exceeding 1000px, I need t ...
When applying transitions to an element and adjusting the width and/or height along with -webkit-transform:translate3d, there is a noticeable stutter in the transition animation. It seems like the width/height change is animated first, then partially trans ...
In my jQuery mobile page, I have a simple setup: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.2"> <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" /> < ...
Encountering a minor issue with the accordion/tab layout provided in this link: https://jsfiddle.net/drj3m5tg/ The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clic ...
While using the $.each function in jQuery, I am retrieving data and adding it to a table in the following manner: $.each(segment, function (index, innerSegment) { var tr; tr = $('<tr/>'); tr.append("<td>" + segment[i].Airline.Air ...
Below is the code snippet I am currently working with: <li> <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a> </li> <li> <a href="<?php echo base_url()?>home/promos/text ...
My template looks like this: I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screens with a width of 100%, I want ea ...
previewCan someone help me figure out why my Bootstrap dropdown menu is not working correctly? I recently downloaded Bootstrap to create a custom design, and while the carousel is functioning properly, when I click on the dropdown button, the dropdown-menu ...
Whenever I click on the Phone Number, it displays an error message saying that the function is not defined. How can I fix this issue? Thank you in advance! Here's the code snippet: <div class="product-label"> <h4><?php echo $p["Fu ...
I'm currently working on a feature that involves highlighting a ListItemButton with a specific background color when selected. However, I now want to take it a step further and add an outline or border color around the ListItemButton when it is select ...