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.
Related
I was trying to build a menu for a website, and I used this code:
nav#menu:hover li{
background-color: #606060;
}
However, when I hover over the list items on the site, the code changes the background color of every single one of them, not just the one I have my cursor on, does anybody know what I should do?
This should fix it
nav#menu li:hover { background-color: #606060; }
You had hover on entire menu and not its individual li tags.
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;
}
I've seen the other question about this here but their solution did no work for me. When the mouse hovers over a hyperlink, a pesky red line appears underneath it. I've tried:
a:hover{
text-decoration: none;
border-bottom: none;
}
a {outline : none;}
.entry-content a {
border-bottom: none;
}
on Appearances->Customize->Additional CSS
on Appearances->Editor->style.css
also on the Slider Revolution Custom CSS because initially I thought this was an issue with the text in the slider, but later realized it's from the whole theme.
also on style.css:
every instance of border-bottom was commented out and replaced by border-bottom:none;
every instance of a:hover that had border-anything had that border commented out
every instance of box-shadow was commented out and replaced by box-shadow: none;
The red line keeps showing up when I hover. I don't know what else to do. I also asked someone to clear their cache and cookies and then refresh the website. The underline/border/box is still there. Is there anything else that could be causing this?
Based on the Scrawl theme preview, looks like it's an ::after so you can override it with this:
.comment-content a:after, .entry-content a:after, .comment-respond a:after, .site-footer a:after {
display:none;
}
Do keep in mind that for accessibility reasons you should probably keep an underline of some sort, but this :after seems rather odd, not sure why they didn't just go with text-decoration:underline instead.
I'm trying to style a custom menu in the sidebar of a child theme of
WordPress' TwentyTwelve theme.
I'm trying to give a current menu item a grey background.
Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.
I'm now using this css code:
.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.
the weird thing is that it runs ok on my localhost.
I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.
Has anyone experience with this? / How it should be styled?
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.
The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.
Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.
If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
>>>> display: inline !important; <<<<<<<<
text-align: center;
width: 100%;
background: transparent;
border-color: #ff0000;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background-color: #ffffff;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
The bit with the arrows would have originally looked like this:
display: inline-block !important;
I hope this sort of helped you out a little bit.