This question is based on a thread here on SO Here This works all fine, unless the 2nd level item is not on top. In the example given, the item with the 2nd level menu is the first item. if you move the item down one or two spots, the 2nd level opens at the top.
The CSS, looks good, I also thought maybe it had to do with the Bootstrap version in the one demo link in the thread
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
(Fiddle).
So to eliminate that issue, I moved it around in the sandbox, from Fiddle, and got the same issue, so it seems it is not with my code, or Bootstrap version. I am not attached to doing it this way, I am fully open to using something different, as long as I can have 2nd level menu, and open on hover on full size screens.
Thanks,
Dave
UPDATED
I just added
.dropdown-menu .sub-menu{
top: auto !important;
margin-top:-30px !important;
}
and it seems to work fine, please check if this is what you want.
Here is fiddle
Related
I am trying to make a menu with slanted ends and buttons with triangular ends in my project. But I am ending up with some white spaces in firefox and ie.
I have taken code which you can see on this page:
SOURCE
I.e.
But in chrome there is no such space and just looks fine.
My work can be seen at this website:
thejobupdates.com/pt/devos
Please help me out to remove the unwanted white spacings.
I also have a FIDDLE here for you guys to edit.
CSS:
#heroTab li > a {
text-decoration: none;
display: block;
position: relative;
line-height: 52px;
padding: 0 8px;
color:#fff;
text-transform:uppercase;
font-family:'open_sansregular', sans-serif;
font-size:15px;
margin-top: 10px;
background: #243276;
}
#heroTab li > a:after {
content: '';
position: absolute;
border: 26px solid #243276;
border-right-color: transparent;
border-top-color: transparent;
left: 100%;
top: 0;
}
#heroTab li > a:before {
content: '';
position: absolute;
border: 26px solid #243276;
border-left-color: transparent;
border-bottom-color: transparent;
right: 100%;
top: 0;
}
Thanks for the help.
You can just change the margin left/right on the tabs to -1px, e.g.
#heroTab li > a {
...
margin:10px -1px;
...
}
This will cover up the apparent gap. I think this is a rendering issue with angles, so you have to overlap them by 1px to get rid of it. See here.
Use this style to fix issue in firefox & Ie
#heroTab li {
cursor: pointer;
float: left;
margin-right: 51px;
}
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 have a subnav that has a border-bottom under each of the sub menu items, when I was checking to see if it was ok in all the browsers I noticed that the border-bottom stopped where the text ended in IE7.
Here is my css
.subnav_wrapper_ul {
background: none repeat scroll 0 0 #00AEEF;
font-size: 13px !important;
position: absolute;
top: 34px;
z-index: 1000;
}
.header-wrapper .main-nav li {
float: left;
list-style: none outside none;
position: relative;
white-space: nowrap;
z-index: 1000;
}
.subnav_wrapper_ul li {
border-bottom: 1px dotted #FFFFFF;
float: none !important;
padding: 0;
width: 100%;
}
if there is anything else that you need from me please let me know
Give the border-bottom css property to the ul element , instead of the individual li items.
.subnav_wrapper_ul {
background: none repeat scroll 0 0 #00AEEF;
font-size: 13px !important;
position: absolute;
top: 34px;
z-index: 1000;
border-bottom: 1px dotted #FFFFFF;
}
We don't have any link or any image for reference, so in this case we all have to guess.
anyway you are talking about submenu section. can we use a IE7 specific hack here..
*:first-child+html .subnav_wrapper_ul li {
border-bottom: 1px dotted #FFFFFF;
float: none !important;
padding: 0;
width: 100%;
}
Another way to target IE7 is:
*border-bottom: 1px dotted #FFFFFF;
I'm trying to understand the difference between Twitter Bootstrap dropdown menus when they are included within a navbar and when they are not.
When they are included into a navbar, a little up triangle/arrow is showed upon the expanded menu. This triangle is not showed when no navbar is used :
http://twitter.github.com/bootstrap/javascript.html#dropdowns
I just spent two hours exploring the css/html, I still don't understand WHY...
Any idea ?
There are two styles applied to the dropdown menu when inside the nav element. They are as follows:
.navbar .nav > li > .dropdown-menu::before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu::after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}
They create two triangles on top of each other one light grey, the other dark grey.
If you use chrome developer tools you can inspect these elements and turn off different styles to get a feel for what they are doing. These styles are not applied without the navbar
Just add this to the CSS and you will be able to use dropdown menu arrow without placing the dropdown inside a nav bar
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu:before, .dropdown-menu.pull-right:before {
right: 12px;
left: auto;
}
.dropdown-menu::after, .dropdown-menu.pull-right:after {
right: 13px;
left: auto;
}
The triangle can be generated by the following syntax:
<b class="caret dropdown-toggle"></b>
I am just cleaning up some CSS for a client.
I am not a front-end person, but have been saved by bootstrap (thank you, twitter).
However, I am having a really hard time cleaning up a custom navigation panel
(no twitter). I have provided the CSS below. I need it to be able to:
1) close gracefully at the end (the beginning starts with a vertical border, not an arrow.
I would like the end to have symmetry and close the way it began).
2) Get the container to not expand to the end of the page.
3) I can't seem to get it to work in chrome. It falls apart in chrome but works in IE and Ff.
Here is the link. Any advice? Thanks so much.
http://annualdinnerdev.elasticbeanstalk.com/
/* ------- Wizard Interface ---------- */
#wizHeader
{
border: solid 3px #fff;
margin-bottom:25px;
-moz-box-shadow: 3px 3px 4px #C2CBCE;
-webkit-box-shadow: 3px 3px 4px #C2CBCE;
box-shadow: 3px 3px 4px #C2CBCE; /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C2CBCE')"; /* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color= '#C2CBCE' );
}
#wizHeader li label
{
font-size:x-large;
}
#wizHeader li a
{
font-size:large;
}
#wizHeader li .prevStep
{
background-color: #D6E6FA;
color:#000;
}
#wizHeader li .prevStep:after
{
border-left-color: #D6E6FA !important;
}
#wizHeader li .currentStep
{
background-color: #6699CC;
color:#fff;
}
#wizHeader li .currentStep:after
{
border-left-color: #6699CC !important;
}
#wizHeader li .nextStep
{
background-color: #F0E9EA;
color:gray;
}
#wizHeader li .nextStep:after
{
border-left-color: #F0E9EA !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 14px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 18px;
}
Add a background color to #wizHeader to create the visual of a right-side border.
Specify a width value in #wizHeader to prevent it from expanding to the right of the page.
It seems to be working fine on Chrome for me (latest version)
Here are some examples of declarations to add to #wizHeader (add these to the ones currently in the CSS declaration)
#wizHeader {
background: #6699CC;
width: 960px;
}
Adding more based on comment...
The reason the arrows are being bumped down is because the 's are block elements, floated left, so they'll flow to fit whatever width they have available and drop down onto the next line when they run out.
If you want to cut off the last arrow, you'll have better luck by targeting the that wraps the last . This worked for me, editing in Chrome's Inspector:
#wizHeader li:last-child {
width: 172px; /* you might have to tweak this a bit*/
overflow: hidden;
padding-right: 0;
}
Then, change the width of the #wizHeader accordingly. 930px wide seemed to do the trick with the above snippet.