The bootstrap tabs work great, but users want me to increase the thickness of the borders. But, when I increase the thickness from 1px the active tab ends up with a line on the bottom border. I tried increasing the thickness of the bottom border on the active tab, but does not hide the line.
.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}
.nav-tabs > .active > a {
border-bottom: 3px solid #FFFFFF;
/* works with 1px */
}
The following fiddle show the issue : http://jsfiddle.net/jerrykur/FEuC3/
i've amended your jsfiddle, is this what you're after?
.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}
.nav-tabs > .active > a {
border-bottom: none;
position: relative;
top: 3px;
/* works with 1px */
}
http://jsfiddle.net/FEuC3/2/
You can try moving the tab down a bit further so that it will cover the line. This will work so long as the bottom border is not too thick. (You will notice the active tab will not stay in line with the other tabs)
.nav-tabs > .active.active {
position: relative;
top:2px;
}
Adjust the margin-bottom for the active class.
.nav-tabs>.active>a,
.nav-tabs>.active>a:hover,
.nav-tabs>.active>a:focus {
margin-bottom: -3px;
}
You may or may not want to use the :hover and :focus, too.
Related
My second question today. I don't seem to find the answer why the dropdown disappears before I can reach it with my mouse cursor.
http://www.liveaerosmith.com
The "1970s" button in the top menu has a submenu, but it can't be clicked because it disappears before the cursor can reach it.
Same behaviour on FF and Chrome.
This image says it all:
so there's a clear gap between the element with the :hover state and the child ul item
you could create a transparent :after pseudo element on the hovered LI that will connect the elements and "fill" the gap.
Or rather do it the proper way:
.site-bar {
border-top: solid 1px #ebebeb;
border-bottom: solid 1px #ebebeb;
/*padding: 13px 0; REMOVE THIS */
z-index: 10000000;
}
.navigation > li > a {
margin-right: 30px;
padding: 13px 0; /* ADD THIS */
}
.navigation li:hover > ul, .navigation .sfHover > ul {
top: 44px; /* INSTEAD OF 34px */
}
I have this style for the opencart category menu:
#menu .dropdown-inner a {
border-bottom: 1px solid #1f90bb;
}
And I am trying to remove the bottom border:
#menu.dropdown-inner a li:last-child {
border-bottom: none;
}
But it's not working. Please help!
JS Fiddle Example
Change your second style so that the a is inside the li:
.... li:last-child a {
border-bottom: none !important;
}
I've got the following CSS.less
header.section-header ul {
width: 100%;
list-style-type: none;
li {
display: inline-block;
padding-right: 10px;
.bordered(0,0,0,#compcolor);
margin-right: 10px;
.font-size(12);
color: #compcolor;
}
li:first-child {
.bordered(0,0,0,0);
}
}
This is a simple horizontal list. I wish to turn the border off on the first item, but it's not showing in FF or Chrome. The item appears but doesn't have the specificity. Any ideas?
Edit:
The mixin is
//.bordered(COLOR, COLOR, COLOR, COLOR);
.bordered(#top-color: #bordercolor, #right-color: #bordercolor, #bottom-color: #bordercolor, #left-color: #bordercolor) {
border-top : solid 1px #top-color;
border-left : solid 1px #left-color;
border-right : solid 1px #right-color;
border-bottom : solid 1px #bottom-color; }
0 is not a valid color value. Perhaps you meant transparent?
li:first-child {
.bordered(0,0,0,transparent);
}
(You have to have a zero border width or a border style of none in order to actually disable the border, but it's hard to make out what exactly your .bordered() function is doing.)
I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do?
code:
.navigation li:hover {
border: 1px solid #ccc;
}
You 'jump' is caused by the 1px height of the border, that make your li move
You might use
.navigation li:hover {
border-color: #ccc;
}
.navigation li {
border: 1px solid #<parentBackgroundColor/transparent>;
}
instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.
.navigation li {
border: 1px solid transparent;
}
You can add a transparent border when you're not hovering, then it won't jump.
Or, you can remove a total of 2px vertical padding around the element, for example:
.navigation li {
padding: 10px
}
.navigation li:hover {
padding: 9px;
border: 1px solid #ccc;
}
I am trying to replicate the effect I see
Currently I have http://jsfiddle.net/GWkk3/
How can I remove the border between the active li and the 2nd level nav?
Draw the border on the parent <li> elements rather than the child <ul>. Add/change these properties:
.appTabs li {
border-width: 1px 0 1px 1px; /* was 1px 0 0 1px */
}
.appTabs li.active {
border-bottom: 1px solid #EEE;
}
.appTabs li ul {
top: 25px; /* was 24px */
}
And remove this property:
.appTabs li ul {
border-top: 1px solid #CCC;
}
That gets us this far:
Now the inner border just needs to be extended all the way to the right (I'm working on that part).
Make the active tab have 1px extra bottom padding, and have a bottom margin of -1px, so it sits over the line.