Ok so I'm having some issues changing the active state on my bootstrap tabs. I managed to get the hover to work but there is still some issues I am running into.
This is what I am currently using for the hover, I need the active state to be the same but I'm not sure how to do that.
.services-icon-holder {
border: 2px solid #272727;
border-radius: 50%;
width: 65px;
height: 65px;
margin-bottom: 40px;
}
.services-icon-holder:hover {
background-color: #272727;
cursor: pointer;
}
.services-icon {
font-size: 28px;
color: #272727;
line-height: 2.2 !important;
padding-bottom: 15px;
}
.services-icon-holder:hover .services-icon {
color: #f1f1f1;
cursor: pointer;
-webkit-transition: color 0.5s ease;
}
I also have an issue with the active tab being 1 or so pixels above the rest of the tabs, I used inspect element to try and find where this is coming from but to no success.
You can check out the live site here (just go to services section to see the tabs)
Please manage this code , this is the css structure
.services .nav > li > a {
outline:none ! important;
border: none;
}
.services .nav > li.active > a .services-icon-holder {
background-color: #272727;
cursor: pointer;
}
In /css/style.css:517
.services .nav > li > a {
/* Add below */
border: none;
}
And for active state color, you can add this code to your style
.nav-tabs > li.active .services-icon-holder {
background-color: #000;
}
.nav-tabs > li.active .services-icon-holder > .services-icon {
color: #fff;
}
Related
I could very well have lost it.
My :hover, a:link states do not seem to work on a mobile.
I have a fixed nav at the bottom of the screen:
/* nav */
nav#desktop {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-color: transparent;
padding-top: 28px;
z-index: 1002
}
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 2.3%
}
#media only screen and (max-width: 675px) {
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 3%
}
}
nav#desktop > ul > li {
width: 200px;
font-size: 19px;
font-weight: 400;
float: left;
margin-right: 12px;
position: abolute;
bottom: 0px;
overflow: hidden
}
nav#desktop a {
color: #000
}
nav#desktop a:hover {
color: #8974A7
}
On a desktop the hover works successfully, as in when you hover it shows purple and then goes back to black.
Why on a mobile, when the li item is clicked, does it go purple, and then stay purple.
I did have:
nav#desktop a {
color: #000
}
nav#desktop a:hover, a:focus {
color: #8974A7
}
Thinking :focus was behind it, having removed it now; still no change.
Interestingly, I have:
#mobile-open #mobile-container > ul {
position: relative
}
#mobile-open #mobile-container > ul > li {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#mobile-open #mobile-container > ul > li:last-child {
margin: 0px;
padding: 0px
}
#mobile-open #mobile-container a {
color: #fff;
text-decoration: none;
}
#mobile-open #mobile-container a:hover {
color: #ccc
}
For links within my open menu, and the two states work as expected.
As you can imagine, :hover is almost impossible to truly support on consumer touch devices (there's no detection for when a user is hovering over the screen but not touching it).
So the devices do the best they can, and they end up with what you observe, which is a pretty terrible experience, but you're at the mercy of browser vendors - you're developing on their platforms.
Do what often seems to be done, add a piece of JavaScript to detect (imperfect) user-agent/touch detection and add a class of touch to the body element.
And then, everywhere in your CSS you'd have to do this:
body:not(.touch) someselector:hover { }
Or do the inverse:
body.no-touch someselector:hover { ... }
If you decide you like the :hover implementation of a particular browser vendor when on touch, but not the implementation of another, then you can add further classes to your CSS to target specific browsers/devices.
All solutions are pretty terrible, really.
You need to use :active and :visited to change the color after you selected the element.
:hover on mobile don't work. Devices try to render it as better as they can but with touch device there's not an :hover status.
My client is seeing a strange artifact of top of the links on hover showing the pre-hover color, in this website: http://mfctest2.no-ip.org/ (apparently on pages other than homepage).
This is what it looks like to them:
They are seeing it in Google Chrome Version 55.0.2883.95 (64-bit) - but I'm not seeing it in my Chrome 56.
My CSS code is:
.main-navigation li > a {
display: block;
padding: 8px 0 5px;
font-family: tradeGothicCn18;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
color: #000000;
transition: color .3s;
}
.main-navigation a:hover {
color: #e31e2d;
}
.main-navigation li.current-menu-item > a {
color: #e31e2d;
}
.home .main-navigation a {
color: #ffffff;
}
.home .main-navigation a:hover {
color: #e31e2d;
}
Have any of you experienced something like this? What would be a good solution?
In my form validation I'm using bootstrap tooltips to show
error message.
I adjusted the css to change the appearance (img 1)
/* Tooltip */
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 4px;
font-size: 9px;
letter-spacing: 0.5px;
}
.tooltip.bottom {
padding: 0px !important;
margin-top: -6px !important;
}
/* Tooltip arrow */
form .tooltip.top > .tooltip-arrow,
form .tooltip.bottom > .tooltip-arrow,
form .tooltip.left > .tooltip-arrow,
form .tooltip.right > .tooltip-arrow {
border: 0px;
}
I would place my tooltip to the left of the element as in img 2,
but I haven't found a way to do it. (bottom-left not working)
Bootply
How would I do it?
Thank you
According your pen, just add this css to your css
.tooltip.fade.bottom
{
left:30px !important;
}
I just use !important to override the current left value and you will get your result.
Please add the following in your css:
.tooltip{
left:20px !important;
}
modify css like below,
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 0px;
font-size: 9px;
letter-spacing: 0.5px;
margin-left: -352px;
}
.tooltip-inner {
max-width: 85px;
text-align: center;
border-radius: 4px;
}
I am having trouble with the sub-menu items at the following site. Actually the problem is with the sub-sub-menu items, i.e. the 3rd level items (I am not sure what these are actually called).
You may need front-end password to view "calzada321" (no quote marks).
http://polynovo.com.au/
As per screenshot (link below), in most browsers, the 3rd level items are squished, ie they do not display in an attractive or useful fashion on hover. I am not sure how to fix (obviously). Any help appreciated.
http://polynovo.com.au/wp-content/uploads/2014/11/Untitled-1.jpg
/* 2.3 Navigation
------------------------------------------------------------------------------*/
#navigation {
margin-bottom: 7px;
position: relative;
z-index: 2;
}
#navigation .menu-item {
float: left;
background: url(../images/common/bg_nav-separator.png) no-repeat 0 center;
position: relative;
}
#navigation .menu-item:first-child {
background: none;
}
#navigation .menu-item.has-sub-menu:hover {
background-color: #e5eaef;
}
#navigation .menu-item a {
color: #002d62;
display: block;
font-size: 15px;
/* font-weight: bold; */
padding: 18px 17px 18px 16px;
text-transform: uppercase;
}
#navigation .menu-item:first-child a {
padding-left: 3px;
}
#navigation .current-menu-item > a,
#navigation .current-page-ancestor > a,
#navigation .menu-item a:hover {
color: #c72932;
text-decoration: none;
}
#navigation .has-sub-menu .current-page-ancestor > a {
color: #002e62;
}
#navigation .has-sub-menu .current-page-ancestor > a:hover {
color: #fcb040;
text-decoration: none;
}
/* Sub-navigation */
#navigation .sub-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
padding: 17px 22px 18px;
width: 155px;
background: #e5eaef;
}
#navigation .menu-item.has-sub-menu:hover .sub-menu {
display: block;
}
/* ---I added this item below made sub-sub items sit out more but still not good---*/
#navigation .menu-item.has-sub-menu:hover .sub-menu .sub-menu {
margin-left:200px;
margin-top:-35px;
display:block;
}
#navigation .sub-menu .menu-item {
float: none;
padding-left: 12px;
margin-bottom: 5px;
background: transparent url(../images/common/sprite_icons.png) no-repeat 1px -229px;
}
#navigation .sub-menu .menu-item a {
padding: 0;
font-weight: normal;
line-height: 40px;
text-transform: none;
}
There is some issue in your css code, like hovering action. first you should use direct child selector for showing the sub-menu, so the third level will remain hidden.
.menu-item:hover > .sub-menu{ display: block }
And lastly is for your problem, add styling for sub-menu starting from the third level. You just need to set the left property to 0;
.sub-menu .sub-menu{ left: 0 }
EDITED ANSWER ACCORDING TO THE CODE SNIPPET
you can change this selector which is for showing sub-menu to this
#navigation .menu-item:hover > .sub-menu { display: block }
this selector will show only direct sub-menu, not all sub-menu in one menu item. and you don't need to set margin top nor margin-left.
Next you need to add styling for third level menu, since this menu positioned on the left side.
#navigation .sub-menu .sub-menu{
left: 100%;
top : 0;
}
Since the sub-menu is absolute positioned, you just need to set the left to 100%, this will placed the third level menu sit next to the selected 2nd level menu
I have following HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet/less" href="assets/stylesheets/style.less" />
<script src="assets/stylesheets/vendor/less/less-1.3.0.min.js"></script>
</head>
<body>
<nav>
<ul class="tabs">
<li class="selected">
Foo
</li>
<li>Bar</li>
<li>Baz</li>
</ul>
<nav>
</body>
</html>
How should I write my style.less to style the list as Twitter Bootstrap Basic Tab. The obvious way
to do this, to copy and paste all relevant css:
$cat style.less
#import "vendor/bootstrap/less/bootstrap.less";
.tabs {
// .nav
margin-left: 0;
margin-bottom: #baseLineHeight;
list-style: none;
// common style for tabs and pills
.clearfix();
// Give the tabs something to sit on
border-bottom: 1px solid #ddd;
}
.tabs > li {
float: left;
}
// Make links block level
.tabs > li > a {
display: block;
}
.tabs > li > a:hover {
text-decoration: none;
background-color: #grayLighter;
}
// common style for nav-tabs
.tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
}
// Make the list-items overlay the bottom border
.tabs > li {
margin-bottom: -1px;
}
// Actual tabs (as links)
.tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: #baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
border-color: #grayLighter #grayLighter #ddd;
}
}
// Active state, and it's :hover to override normal :hover
.tabs > .selected > a,
.tabs > .selected > a:hover {
color: #gray;
background-color: #white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
Is there any better way to achieve this, without much copy and paste? Note: I
can not change the HTML file.
I end up by rewriting or overriding bootstrap/less/navs.less (see: HTML and less files ) to make it mixable and Allow appropriate LESS classes to be mixed-in
$cat vendor/bootstrap/less/navs.less
// NAVIGATIONS
// -----------
// BASE CLASS
// ----------
.nav {
margin-left: 0;
margin-bottom: #baseLineHeight;
list-style: none;
> li {
> a {
display: block; // Make links block level
}
> a:hover {
text-decoration: none;
background-color: #grayLighter;
}
}
}
.nav-tabs {
.clearfix();
border-bottom: 1px solid #ddd; // Give the tabs something to sit on
> li {
float: left;
margin-bottom: -1px; // Make the list-items overlay the bottom border
> a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
padding-top: 8px;
padding-bottom: 8px;
line-height: #baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
border-color: #grayLighter #grayLighter #ddd;
}
}
}
}
.nav-tabs {
// Active state, and it's :hover to override normal :hover
> .active {
> a, a:hover {
color: #gray;
background-color: #white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
}
$ cat style.less
#import "vendor/bootstrap/less/bootstrap.less";
.foo {
.nav;
.nav-tabs;
}
.foo > .bar {
.nav-tabs > .active;
}
Your example doesn't work, sorry
But I'm highly interested in this subject. I wanna colaborate
In my opinion there is no point of discussion about giving that path
First we mix content and style in a page
Then they made css in order to separate both
Now we mix again style (to put a tag in the class of an object IS mix'em) and content together
So, lets separate'em again bro!