Every time I press the Login dropdown menu, the colour of the button is inheriting the background image's colour. However, when I move my cursor away from the Login button, a white square appears over it. I do not have any css supporting the button. Both the code and sample images are below. I am trying to make it so that when I move my cursor away, the Login button still inherits the background image colour rather than changing to a white square.
Amateur at bootstrap coding so if there are any other mistakes, do let me know!
<li class="dropdown">
<b>Login</b><span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
Cursor is on button
Removing cursor from button
Happens because when you click on the dropmenu bootstrap adds a class called open to the <li> which applies that background, and it stays until it loses focus all you have to do is override that class and remove the background.
add this to your css file which should come after the bootstrap <link> to override it.
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover{
background:none;
}
Related
I'm trying to add a button to my site that initiates a visitor to opt into push web notifications, using push crew.
When you create the button with the service they give you the following code
<button onclick="_pcq.push(['triggerOptIn']);">
GET NOTIFICATIONS
</button>
Inside there are no options to alter the size, font or colors. I contact their support -> useless.
So the button created is dark grey which turns to light grey when you hover over and white text on both sides.
I have very limited web knowledge, but with googling i found a few codes <center> to center the button and a few other codes that work when you place it between <button and onclick such as width:150px; height:40px; to change the size of the button. But i'm still working out how to change the color. If i add color:red; it changes the text color which is OK. But if i add the code background-color: #FFFFC0; for example it blows out the button. It changes the color of the button but the button no longer works or changes color when hovering over.
The page builder i'm using has html but I don't have access to the CSS, so need a html workaround
Hey I asked a detail question previously about this, but I think that was the wrong approach to solve the problem. So I am asking this as simply as possible.
I am using Twitter-Bootstrap and I have set my dropdown-toggle to dropdown on hover (normally it happens through clicking).
During hovering, the dropdown-toggle becomes a darker color to highlight it, however, as the user moves his/her cursor to the dropdown menu, the color of the dropdown-toggle changes back to its original.
How do I fix this? I tried using the active and focus classes but that did not seem to work. Any help is greatly appreciated. I can make a fiddle for you guys if that would help.
Edit: I have figured out the solution thanks to Turbopip. It is something like this:
.navbar-default .navbar-nav .dropdown:focus,
.navbar-default .navbar-nav .dropdown:hover,
.navbar-default .navbar-nav .dropdown:active {
background-color: black;
}
After seeing him use the anchor tag for solution two, and dropdowns for 3 and 4, I figured I had to change the color of the dropdown tag, not dropdown-toggle.
Solution 1? Try to set the class of the <li class="dropdown"> to open on hover
Solution 2? This might help, but will know more once you post the code.
.navbar-default .navbar-nav>.open>a {
background-color: black;
}
Solution 3? You could also try adding the class active to the opened LI, it should create the same effect, and you are already using javascript/jquery to simulate clicks in Bootstrap, I would guess.
Solution 4? In your script that creates the hover effect with Bootstrap CSS, listen to the li.dropdown instead of li.dropdown > a
First time asking a question here...
I'm making a drop down menu with some effects that I got from cssdeck.com.
Basically the nav is from one source, and the sub menu from another.
I've mixed two cssdeck.com source to make it look like one.
So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.
The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...
How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????
<nav>
<div class="nav_main ph-dot-nav">
Home
<a href="#">About
<div id="sub_about">
<ul>
<li class="li_first">회사소개 </li>
<li>대표인사말 </li>
<li class="li_last">회사연혁</li>
</ul>
</div>
</a>
Services
Portfolio
Partners
Contact
<div class="effect"></div>
</div>
</nav>
Fiddle Demo here
You can solve this, if you also show the submenu if you hover on it. See
https://jsfiddle.net/7xfrod2s/
#sub_about:hover {
visibility: visible;
}
Also I moved the visible: hidden style to the parents tag of ul (#sub_about).
Maybe you need an other :before tag so that there is no gap between the header and the submenu (a curser-bridge so to say) ;)
To achive this with CSS there's are rules your need to stick with. First take a look as this pic.
http://i.imgur.com/IAsz39w.png
(I'd love it, if someone help me post a pic)
must be have no space in between your Menu tag and subMenu. It will fail if there is 1px in between thse element.
use the simple hover stage like follow
subMenu must be children of Menu
hide the subMenu
.subMenu{
display: none;
}
make subMenu appear when you hover on its parent or itself
.menu:hover .subMenu{
display: block;
}
Explaination: the hover state of DOM quite simple. if you are hovering on a child element it also mean that you are hovering on its parent. So this is while you must not let any space inbetween Menuand subMenu. Because the movement your cursor hover on that 1px for 1ms the DOM will understand as the hover state over. So it will hide the subMenu away
For example: in the pic. Pretending like your submenu not hiding, so if you are hovering on subMenu the DOM also understand as you are also hovering on Menu (parent menu)
I integrated Bootstrap menu in my web site that I am developing now. In fact, I would like to know how can I disable Bootstrap links hover background color ?. The explanation is as below:
This is the menu that I integrated:
When I put the mouse cursor over an item of the menu, its background color changes to blue:
What I want is that when I put the mouse cursor over any item nothing happens, it means that its background color doesn't change at all.
This is the part of css code I am using:
.notif_link:hover{
background-color: inherit !important;
}
And this is the code line belonged to an item of the menu I am using:
<li class="notif"><a class="notif_link" href="#"><span class="notif_content">hello</span></a></li>
So, my question is what is the error here?..And how can I do that?
Thanks in advance.
Try it:
<a class="notif_link" href="#"><li class="notif"><span class="notif_content">hello</span></li></a>
a[href]:after { display:none;} (or)<a class="disabled" href="javascript:void(0)">LINK</a>
I have created this CSS drop down menu. The menu works flawless as it should, my only question
is how can I get the sub menus to stay open and not instantly disappear when the mouse is removed off of them?
My code is at this link,
http://fiddle.jshell.net/NJ4UP/
I have tried several things but nothing is seeming to do what I want. I would prefer not to use J-Query or JavaScript, as I'm not that familiar them, but any help will be greatly appreciated!!
All I want and need is for the sub-menus to not instantly disappear if the mouse is not hovering over them. I was thinking a timeout option or something that sets it to close after a predetermined amount of time (ie 5 seconds) or another menu or link is clicked.
Thanks in advanced.
In CSS you may expand area that covers <li> when hovered with a pseudo element : DEMO.
li:hover:before {
content:'';
position:absolute;
width:100px;
height:200px;
background:rgba(0,0,0,0.01);/* not 100% transparent, so it gets the mouse over */
}
In CSS you may delay transition to close your menu DEMO.
do not use display to hide/show the submenu
Use a rule that handles number value.
#menu ul > li ul {
position:absolute;
margin-left:-9999px;
transition:0s 0.5s;/* stay open 0.5sec before to hide again */
}
#menu ul > li:hover > ul {
margin:0;
transition:0s 0s;/* show ! don't wait */
}
You could check this out, maybe it helps:
http://www.w3schools.com/css/css3_transitions.asp
In CSS you may use the experimental rule pointer-events and HTML tabindex attribute .
pointer-events to control mouse events hover <a> in <li> first level.
tabindex for <li> first level , so it can be focused via click & tab.
The idea is:
to shortcut the click events on so <li tabindex="0"> can take the :focus and apply
same rule as :hover.
then once <li> has focus , to give back to ability to receive mouse events.
DEMO - CSS click open/close menu
it alows to open close menu via the key tab
At the moment i believe it is better to set a class instead tabindex and use javasript to toggle class on click , or at least to keep the :hover rule effective.
It can be done somehow for a two level menu too