On the menu of this page (blog.prco.com), I have added a background image for the hover effect on the elements. However, when hovering, the dot seems to move towards the final position from its origin point.
My question is, how can I center the image below the element without using the background-position property? I would like the image to stay fixed in place.
Please provide a solution using only CSS, as I am unable to modify the HTML since this site is running on WordPress.
Thank you!
Check out the solution using the :after selector here:
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: inline-block;
margin: 0 15px;
}
li a {
display: block;
position: relative;
}
li a:after {
content: '';
display: block;
opacity: 0;
width: 6px;
height: 5px;
background: url(http://blog.prco.com/wp-content/themes/annina/images/dotCo.png) center bottom no-repeat;
position: absolute;
left: 50%;
margin-left: -3px;
transition: opacity .3s ease-in-out;
}
li a:hover:after {
opacity: 1;
}<ul id="menu-menu1" class="menu nav-menu">
<li id="menu-item-60" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-60"><a href="http://blog.prco.com/blog/category/london/">LONDON</a>
</li>
<li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-56"><a href="http://blog.prco.com/blog/category/paris/">PARIS</a>
</li>
<li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-57"><a href="http://blog.prco.com/blog/category/munich/">MUNICH</a>
</li>
<li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a href="http://blog.prco.com/blog/category/moscow/">MOSCOW</a>
</li>
<li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-59"><a href="http://blog.prco.com/blog/category/dubai/">DUBAI</a>
</li>
<li id="menu-item-61" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-61"><a href="http://blog.prco.com/blog/category/new-york/">NEW YORK</a>
</li>
<li id="menu-item-62" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-62"><a href="http://blog.prco.com/blog/category/milan/">MILAN</a>
</li>
</ul>In order to display a static image, specify the "fixed" value for the "background-attachment" property. Here's an example:
section {
background-image: url("images/small_image.png");
background-attachment: fixed;
}
I've been experimenting with adding a logo instead of the 'Home' text in my navigation bar, but I'm not sure where to implement it. Should I add it within #nav or separately? Also, I want the nav bar to stay fixed without overlapping on ...
Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...
Initially, I attempted using regular HTML for the dropdown button but encountered issues. As a result, I switched to jsfiddle to troubleshoot. Despite my efforts, the dropdown feature still refused to work. If you'd like to take a closer look, here&a ...
I noticed that my navbar changes from transparent to opaque when scrolling. I am trying to achieve a similar effect like the one in this example: https://i.sstatic.net/00uPM.png Initially, my navbar looks like this: https://i.sstatic.net/iMyYL.png As y ...
Struggling to center this image on my website. I've attempted various methods like margin: 0 and absolute positions, but nothing seems to work. Being a beginner in html and css doesn't help either. My attempts to center it have been futile. The ...
I have integrated some dashboard widgets in iframes and I want to ensure they are responsive. My goal is for each widget to occupy full width when the screen size is reduced, but appear side by side when the browser window is large (md+): iframe { b ...
I am looking to create a webpage layout that includes a header, mid section, and footer. In the mid section, I want to have a fixed width navigation bar of 250px, with another div holding the content that stretches to fill the remaining space in the browse ...
Is there a way to display a hidden section when scrolling down the page, specifically after reaching a point 800px from the top? I currently have an example code that may need some modifications to achieve this desired effect. UPDATE: [Additionally, when ...
I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
Every time I click on the dropdown, it causes a vertical scroll instead of popping out like a regular dropdown. I want to maintain the horizontal scroll while fixing this issue. Any suggestions on how to solve this problem? Demo: https://jsfiddle.net/d3j ...
I am currently working with Angular version 11 and I have encountered a warning message that states: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning "autoprefixer: Greetings, time traveler. We are now in the era of prefix-le ...
For my project, I have been tasked with developing a website with a fixed width of 1024px. How can I adapt Twitter Bootstrap's 960px fixed width framework to accommodate for the 1024px width requirement? Are there any disadvantages to designing websi ...
After migrating to webpack for managing our assets (js, scss, ...), everything seemed to be working smoothly. However, we encountered a minor issue where the input label behind the file-selector-button is overflowing with its neighbor, as shown in the exam ...
<footer> <div class="copyrights-left"> <p>© 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...
I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net ...
I am looking to create a Selenium IDE test that will confirm the value of the bottom attribute in the "style" section below. How can I go about writing a test for this considering: The Xpath to the element is: xpath=/html/body/div/div[3]/div[2]/div/div/di ...
Is there a technique to position the logo.png so that it appears approximately one-third of the way across the page without affecting its size? I've attempted to use padding or margin adjustments, but it seems to distort the image despite having limit ...
I'm looking to align a small PNG image next to some text within an icon. How can I achieve this? Currently, they are stacked vertically. Here is the current layout - I want the two elements side by side instead. The structure of the division is unique ...
Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...
First, I applied flex to the table > tr. Next, I configured the flex-direction to be row. table { width: 100%; } tr { display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; width:100%; } td:nth-child(1) { flex: 0 0 20%; ...