Do you know how on facebook, when you get notifications, the globe goes white, then you click on it to see them because your so happy. The color stays white on the globe unless you click out OR click the globe. I have the exact same situation. But when I click on the globe. My icon stays white. UNLESS I click out anywhere then it loses that white color. I want to be able to click on the icon and then expect for the colour to go away.
scss:
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
margin-left: 20px;
& > li { height: 50px; }
.dropdown > a:focus { outline: 0px none; }
.dropdown-open {
background-color: $dropdown-bg;
& > a { color: $dropdown-link-color; }
.dropdown-menu { display: block; }
}
its pretty self explanitory, when icon is not clicked, then dropdown is in play, when it is clicked, dropdown dropdown-open is in play.
So for sure facebook use some JavaScript tricks with ReactJs it's pretty straight forward.
But, I think you can use a CSS3 trick with a hidden checkbox and a label. This trick looks to match perfectly your use case.
It's bad for accessibility, it's tricky and you should probably go for some JavaScript. But it's fun.
You can add a fixed overlay than also uncheck the hidden checkbox. Like this, when clicking outside the menu, the checkbox will be unchecked and your menu will go back to a normal state.
This is the only pure CSS implementation I can see.
But again, use JavaScript for this kind of behaviour.
Related
On my website, when I click on a link that has a href or onclick reference, it gets a blue highlight that ends my design. How to remove? See an example in the menu icon that has an 'onclick' reference, I managed to take a print right from the time I click on it on my phone.
How can I remove this?
The icon is blue that I did not program, all links on the site look like this
If a media screen solution suit you. That can work:
#media screen and (max-width:500px) {
.selector:active, .selector:hover {
background-color: unset;
color: #999;
}
}
Given that we're working with an "a" element you can easily get rid of the blue highlighting with basic css:
a:hover, a:focus, a:active {
text-decoration: none;
color: #3c4146 /* Just a mild gray, you can change this to whatever you want */
}
In the case of a different element, which in your case looks like a btn/div with a set background, you can adapt the css to it.
You can set the bg back to its original color when you either hover, focus or set the element to active.
.element:focus, .element:active, .element:hover {
background-color: #000000; /* Use the original element background-color here */
}
a {
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}
I was testing my new pet project on my phone and I also had an issue with BLUE outline/highlight flashing effect upon TAP.
For me #RedhaBenKortbi answer worked.
After applying this CSS to tags, the links were no longer flashing with the blue-ish outline/highlight when you click.
.scaledImage a {
-webkit-tap-highlight-color: transparent !important;
}
Doc says:
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being
tapped. The highlighting indicates to the user that their tap is being
successfully recognized, and indicates which element they're tapping
on.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,
On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);
I've been implementing Bootstrap 3 onto my website, and I am currently experiencing this issue after having selecting the Contact button and closing the pop-up window that comes up:
I do not want Contact to be lit up or highlighted in any manner after closing the popup. What do I need to edit in my CSS file to make this work?
Thanks.
EDIT: Here is my code showing my nav-bar with all of my options. I believe I'm supposed to select something in here in order to edit the CSS of the Contact area.
In CSS, the focus pseudo class is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
By clicking on the button, Bootstrap adds styles to your button via btn:focus, btn-primary:focus, et cetera. One of the styles Bootstrap adds is a border around the button. In order to override this style, you can create a selector that hides the border of your button. For example, you could do something like this.
.btn:focus {
border: none;
}
If this doesn't work, try
.btn:focus {
border: none !important;
}
This will do it for you see example: https://jsfiddle.net/DIRTY_SMITH/LLvkptuk/
Add this to your CSS:
.btn:focus,
.btn:active {
outline: none !important;
}
Check this
input[type="button"]:focus,
input[type="submit"]:focus {
outline: none !important;
} /* for forms */
a:focus {
outline: none !important;
} /* for anchor */
I've got a complex form with rather a lot of css on the following page. Most things are lining up the way I would like, but if you scroll down to "Membership Type" you'll see that the label and radio button lists are not lined up nicely like everything else is. I thought at first that perhaps the required asterisk was pushing things down, but I removed it and that didn't seem to be the case. Ideas? THank you.
http://www.craftonhills.edu/Student_Resources/Student_Life/Clubs/Alpha_Gamma_Sigma/Membership_Application.aspx
change the css on line 829 on screen.css with below css
.scfForm ul {
list-style-image: none;
list-style-type: none;
margin-top: 0;
}
screen shot:
I think it is because the radio has default margins. I tried this in google chrome and it pushed the radio button up slightly
#form_767FC5570C444D6F977241A501F3C667_field_EB23079082B64C4F91BAD9F0444872DAscope_0 {
margin-bottom: 2px;
}
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.