How do I remove the CSS triangles on main menu items that don't have a sub-menu?
See http://v2.letsfaceitbeauty.ca
I think this is the relevant CSS code and I believe ".has-sub" is the correct selector, but I can't figure out how.
#cssmenu > ul > li:hover:after { /* this is the arrow */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6796ff;
margin-left: -10px;
}
If you know the css that makes the triangle and the element you want the triangle on, just put those two pieces together, i.e. replace the previous rule with
#cssmenu > ul > li.has-sub:hover:after { /* this is the arrow */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6796ff;
margin-left: -10px;
}
Related
I'm struggling to make a group button which background get changed on the active path, it may look something like this
I tried an approach but faced some border implementation errors in it, is that body have some better approach to make these button groups?
https://codesandbox.io/s/quizzical-bohr-uczl0?file=/src/App.js
With flex it's not going to work out. My idea is to have a before arrow and an after arrow on each other. The bottom arrow is 1px to the right:
.menu {
background: #efefef;
}
.item {
width: 140px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
color: #000;
background: #efefef;
position: relative;
display: inline-block;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.item.active{
background-color: #0172B6;
color: #fff;
}
.item:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.item.active:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #0172B6;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 2
}
.item.active:after{
content: '';
position: absolute;
right: -26px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.menu .item:last-of-type:before,
.menu .item.active:last-of-type:before,
.menu .item.active:last-of-type:after{
display: none
}
<div class="menu">
<div class="item">Fabric</div>
<div class="item active">Style</div>
<div class="item">Contrast</div>
</div>
How to style bootstrap indicator to be small hexagon?
I styled it to be rectangle, but I can't set it to a hexagon.
JS Fiddle
i tried this: http://jsfiddle.net/bn6aA/53/
CSS:
.carousel-indicators li {
background-color: #4f3212;
width:20px;
border-radius: 0px;
}
.carousel-indicators .active {
background-color: #999;
width:20px;
border-radius: 0px;
}
For hexagon indicators you can set your CSS to use something like this:
EDIT to Make the Icons Smaller
.carousel-indicators {
left: 0;
}
.carousel-indicators li {
width: 24px;
height: 15px;
background: red;
position: relative;
line-height: 0;
margin: 0 20px 0 0;
padding: 0;
border: 0;
border-radius: 0;
}
.carousel-indicators li:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 10px solid red;
}
.carousel-indicators li:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 10px solid red;
}
/*Active*/
.carousel-indicators li.active {
background: gray;
}
.carousel-indicators li.active:before {
border-bottom-color: gray;
}
.carousel-indicators li.active:after {
border-top-color: gray;
}
You will have to do a lot of adjusting based on how big you want the hexagons to be and where you want them to exist on your slider but this should get you going. For the hexagons I used this pages example here which has a ton of other good resources. You can also see your updated Fiddle here. Hope that helps.
EDIT:
In order to make the icons smaller you will need to play with the width and height of the .carousel-indicators li as well as the border-left, border-right border-top, border-bottom property numbers of the .carousel-indicatorsli:before and .carousel-indicators li:after You will also need to adjust their top and bottom positions. Here is the updated Fiddle.
I wanted to know how to indent text with css without indenting the :before property. I want to show a triangle in the before section then indent the text in just a bit more so the triangle doesn't overlap the text.
If i do a text-indent on the main element, it also indents the :before part too.
.header {
border-bottom: 2px solid red;
color: blue;
position: relative;
}
.header:before {
content: '';
width: 0;
height: 0;
bottom: 0;
position: absolute;
border-right: 20px solid transparent;
border-left: 2px solid red;
border-bottom: 20px solid red;
}
The text-indent works... You just have to tell your pseudo element (since it's absolutelly positioned) to be on left: 0;.
See:
.header {
border-bottom: 2px solid red;
color: blue;
position: relative;
text-indent: 20px;
}
.header:before {
content: '';
width: 0;
height: 0;
bottom: 0;
left: 0;
position: absolute;
border-right: 20px solid transparent;
border-left: 2px solid red;
border-bottom: 20px solid red;
}
<div class="header">test</div>
I wold like to change the active:after of the li active item, like the blog example (http://getbootstrap.com/examples/blog/), but in my case, I need a bottom bar instead of a triangle.
The example does this:
.nav
.navbar-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
Everything I got so far is:
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 10px solid;
border-bottom: 5px solid;
border-left: 10px solid;
}
the problem is that it doesnt fit the link text.
How can I change this code to look like a rectangle that fits the word with under the link instead of a triangle?
.navbar-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 10px;
height: 5px;
margin-left: -5px;
vertical-align: middle;
content: " ";
}
If you want to modify how big is the rectangle, just modify height and width as you please
I am using two pseudo elements to create a banner effect on a div, like so:
div { position: relative; width: 200px; background-color: #999; }
div:before, div:after { content: ""; width: 10px; height: 0; display: block; position: absolute; z-index: -1; top: 10px; border-top: 10px solid #666; border-bottom: 10px solid #666; }
div:before { right: -20px; border-right: 10px solid transparent; border-left: 10px solid #333; }
div:after { left: -20px; border-left: 10px solid transparent; border-right: 10px solid #333; }
It works fine in FF, Chrome, Safari & IE9, but no luck with IE8. The two elements with z-index of -1 show above parent. Is there any way to get this to work?
You should try setting a z-index of 1 to div.