Hi my website is http://eeeonlinecourse.com/
I would like to style my menu bar using border-bottom property as follows:
header#top nav ul li a:hover{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
header#top nav ul li a:active{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I have added these two lines into my child theme's stylesheet. However it does not seem to be working. Right now only the hover property is working fine. I have added an active selector after my hover selector but it is still not showing the bottom-border when the menu link is active. What should I add into my stylesheet?
Is it right?.Let's say when user click "Home", the bottom border will appear (under "Home" link).If so, just adds the css (your css) as shown in attached image. (.current_page_item) is the class added for CURRENT (selected) li. If home selected, then border-bottom will appear.
header#top nav .sf-menu li.current_page_item > a,
header#top nav .sf-menu li.current-menu-item > a,
header#top nav .sf-menu li.current_page_item > a
{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
If you want to see the live demo whether it works just like what you want, you can go to "inspect element" and click on 1(in my attached image).Then, add the css to 2(in my attached image).
And, Good Luck..Sorry if this is not the answer.
Looking at your given code and reference site it seems that you have issue with active link only right?
If so than you can simply remove a.active because there is no active class applied to link.
Instead use
header#top nav ul li.current_page_item > a {
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I hope this will solve your problem.
Try giving: current-menu-item is the active menu link.
li.current-menu-item a:active{ border-style: solid;
border-bottom: thick solid #27CCC0; }
Hope this helps.
Related
I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.
Each product has multiple variants, which are linked to different thumbnails.
I can click to each thumbnails to preview it on a bigger size
I would like the border of the active thumbnail to be more visible.
I have tried these codes with :active and ::selection but it doesn't work .
.productThumbs li img::selection {
border-color: #ee0a3a !important;
}
.productThumbs li img:active {
border-color: #ee0a3a !important;
}
I have little experience with :active or ::selection attribute
Link of a product page: https://www.tresor-ethnique.com/collections/africain/products/boucles-oreilles-fleur-etoilee?variant=6090700914718
You're looking at the wrong CSS selector. Also, :active has an entirely different meaning in this context. It means a link that's currently being activated by the user (think of a link currently being moused down on): Read more here.
The selector you want is this either:
.productThumbs li .active
or
.productThumbs li .active img
This would make your statement look like this:
.productThumbs li .active img {
border: 1px solid #ee0a3a;
}
Or instead of using border: 1px solid #ee0a3a; you can use box-shadow: 0 0 0 5px #ee0a3a; if you want an easy way to have a larger border without the photo size shrinking.
I cant for the life of me figure out how to style the bootstrap dropdown menus using CSS.
I can manage to get the background color to change but that's it. The links don't have an underline and the Hover background colour does not change. I haven't even started with the down arrows yet either!! Any advice?
Heres the code im trying:
#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}
Hopefully this helps.
ul.dropdown-menu {
border-bottom: 5px solid #CCC;
}
.dropdown-menu li:hover {
text-decoration: underline;
}
I was a little confused what you wanted to do with the background-color of the list items in your dropdown menu. Here's an example of one way to change the background color when hovering over each link. Using !important after a CSS attribute might help in some circumstances when you want to override any subsequent rules (but it might not be the BEST way to do this).
I recommend opening up your Chrome dev tools and playing around a bit until you get the desired results. I'm assuming you want to change the background-color of your list items when hovering to a different color than what you specified (#273961) since it is already that color to begin with?
.dropdown-menu li a:hover {
background-color: red !important;
}
How do I stop a border being applied twice... once for the active item and once on the hover?
I've tried using .navbar a:not(.active):hover but it doesn't work. I've also tried giving all navbar items a bottom border that is of the required thickness but of the background colour and changing the colour on the hover.
The desired effect is that the active item is in bold and has a white bottom-border, whilst the item the mouse is over also has a white bottom-border (shown in red in the image) but isn't in bold (as both colours will be white I'm not bothered about which one 'wins'). But my problem is when the mouse is over the active item the bottom-border is added twice.
It's most likely due to a border being applied to 2 different elements.
I made you a fiddle to understand the issue.
As you can see all is working correctly because both the .active class and the :hover pseudo class are referred to the ul > li.
ul > li.active{
border-bottom:3px solid red;
}
ul > li:hover{
border-bottom: 3px solid yellow;
}
If you try for example to change the :hover to ul > li > a you see the double border.
ul > li.active{
border-bottom:3px solid red;
}
ul > li > a:hover{
border-bottom: 3px solid yellow; /* double border */
}
I want to give separation between the list of menus in the site.
How to display horizontal lines between each menu items in this site
I want something like this :
We used the below code in menu.css
.em-catalog-navigation li { border-bottom: 1px solid #cecece; }
Strange thing is that it didn't work for me.
Let me know if you need any clarifications.
There was already a style for the parent li [BOY TOYS] so have used that to target the items you wanted
.em_nav .menu-item-hbox .menu-container .menu-item-text.menu-item-depth-3 > ul > li {
border-bottom: 1px solid #cecece;
}