I have a navbar that can be configured to be both vertical or horizontal placed on a page.
It is for a widget on a system using bootstrap 2.3.2.
I want to remove or move the triangle above the dropdown. (What is it called?)
I have tried to set the ::before to display:none , content:none, etc without any success.
Altering the css position left and top only seem to affect the border.
Is there no way to remove/hide this in a neat way? or even better, position it on the left side, towards the navbar?
.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, .2);
content: '';
color: rgba(0,0,0,0);}
Or is this default behavior from bootstrap?
The menu is created by reading through a JSON, so i was hoping for to use the same code for the vertical and horizontal menu, since this is just a visual "issue".
Easy solved by setting content to none on both ::before and ::after.
Should have thought of that ::Before I posted.
Related
I was wondering if anyone can help me. I'm trying to change the colour of my square at the bottom of my homepage it keeps on disappearing when I attempt to change the colour. I'm trying to change it to the colour white from solid red. Why does this keep happening?
Here is my codepen
Below is my CSS coding.
.next {
position:absolute;
bottom: 40px;
left:50%;
cursor:pointer;
height: 50px;
width: 50px;
border: 4px solid red;
border-top: none;
border-left: none;
transform: translateX(-50%) rotate(45deg);
}
Kind Regards,
Liam
Based on your css the arrow shape and color is set with the border property. In this case it's the right and bottom borders of your div that are given a red border, then the div is rotated to look like an arrow pointing downwards.
Update the border color to white instead of red:
border: 4px solid white;
If you were already doing the above, check in the developer console. Sometimes codepen doesn't fully update with your changes -- reload the page to try it again.
Have you tried using specifying the color as a hex value?
border: 4px solid #ff0000; //red
I am having trouble making a CSS styled navigation bar that has a white arrow (triangle) pointing upwards at the selected nav item. The white arrow (triangle) blends with the body below, and is centered on the text box. Something like this screenshot:
Anyone have any suggestions on how to specify a "selected" CSS styling for the nav item as shown in the above screenshot?
I'm trying to create a CSS style called "activate", so <li class="activate">Overview</li> makes the arrow. Here is a jsfiddle of what I have so far https://jsfiddle.net/v680tfvr/
which kind of works, but the highlighting is too big when the user hovers over the menu item, and a second little arrow appears near the top. Seem simple, I just can't figure it out!
I have made the following changes:
Fixed the Border
Fixed the heading
That mysterious thing doesn't appear on hover
Code
.submenu {
height: 40px;
overflow: hidden;
}
.submenu .activate:after {
content: '';
position: relative;
width: 0;
height: 75px;
left: 40%;
top: -39px;
border-left: 10px outset transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ffffff;
}
Fiddle: https://jsfiddle.net/v680tfvr/5/
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that's hidden or suppressed for the active tab?
In other words, I'm trying to do the same thing that StackOverflow does for its tags:
My tab bar is set up as an ordered list with
ul
{
list-style: none;
}
li
{
float: left;
}
Update: I've already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow's version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab's border overlap the div's border (and I'm not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I'm trying to understand the general concept of how overlapping part of a container's border with the content's border works instead of copying and tinkering with CSS until I get something that appears to work.
All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>'s a selected class, and make that one have a 1-pixel higher height.
Here is a very simple example: http://jsfiddle.net/V6gzS/
ok to point you in the right direction use firebug or chromes element inspector and just pick out the bits you need, so on this site for example what you are looking for are called tabs and they are styled like so
#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
}
this is just a part of it but you can learn a lot by looking at some code
As I understand it you are capable of making the buttons by yourself, with the horizontal bottom line.
If that is the case, then make sure that this horizontal line is made as a border-bottom: solid 1px #CCC property on each button (the color might be different). At each page you then add the id id="current" to that one button that is the active page. In CSS you write:
#current {
border: solid 1px #CCC;
border-bottom: 1px solid white;
}
If you have any problems it might be solved by adding !important like this:
border-bottom: 1px solid white !important;
Therefore, this is just four extra lines of code in CSS and one extra HTML attribute in each of the files.
If dynamic menu
If you have a menu that is not static on every page, but maybe dynamically generated or placed in an included file, then the above will not be possible. Because then you can't easily add the new id on each seperate page.
In that case you might do some dynamic adding of the attribute. If a server side language is used, e.g. PHP, then you might be able to easily set up an if{...} command that checks the URL or a GET request or alike. Else you might use some javascript to check each button and add the attribute id if the button text equals some header on the page.
I hope you understand. Good luck.
I did it like this:
ul {
list-style-type:none;
}
li{
float: left;
border-bottom: 1px solid #CCC;
}
li:hover{
float: left;
border: solid 1px #CCC;
border-bottom:none;
}
Sample of What I'm trying to do...
So, my boss really likes the style of wizard navigation I've built in this demo page (above). However, when I built it, the method is somewhat static. What I mean by that is, it doesn't extend well to 5 or 6 or 10 wizard steps. However, I need to have it extend to those steps naturally.
Can I get some recommendations on how to modify the css code so that it works more flexibly? I spent a couple of hours playing around with it, with unsatisfying results.
It's possible using borders and pseudo-elements:
.selected:before, .selected:after {
position: absolute;
top: 0;
content: "";
border-top: 20px solid rgba(0, 0, 0, 0.5);
border-bottom: 20px solid rgba(0, 0, 0, 0.5);
border-left: none;
border-right: 20px solid transparent;
}
.selected:before {
left: 0;
}
.selected:after {
right: 0;
border-right: none;
border-left: 20px solid transparent;
}
Demo (Tested in Chrome and Firefox)
You'll notice I've used SASS in the example. This way, if you have three, or 12 you only have to change one variable in one place($wizard-steps)
, and it will calculate all the other values for you to keep it full width (and fluid!). This could also be accomplished with Javascript if it needs to be dynamic.