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/
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
In HTML page I have a navigation menu that when hover(mouse over) above some menu items, a submenu/dropdown menu appears. Then moving mouse above some of the submenu's items another submenu appears/dropright submenu. To understand the concept, see jsfiddle.
Now, try to hover above menu item Categories->All->IT, and you can see that item Programming is somehow overlapped with text on the page/background. And item after it can not be accessed then.
See CSS styles. What is causing this, and how to prevent that overlapping?
Just set a high z-index on your .droprightMenu and that will place the dropdown above that text
ex:
.droprightMenu {
display: none;
/* hide the sub menus */
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100; /*ADD Z-INDEX*/
}
Try this DEMO, comment position: relative; out:
#homeMainContent #pages {
// position: relative;
text-align: center;
font-weight: bold;
}
Please let me know if this works for you
Just add z-index: 99 to .dropdownMenu, it will be fine.
See : http://jsfiddle.net/CDx9j/4/
To understand : your #pages element use a position relative, such as your dropdown menu. As the #pages element comes after the menu in the HTML float, it will come over the menu.
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
In the site I'm making I'm adding a feature that adds bulletins, little staff notices, at the top of the home page. My idea was that I have a profile section floated to the left, a little dateline at the top showing (of course) the date, and some tags.
The problem arises with the dateline section. The dateline is to the right of the profile at the top of the bulletin. There is a border-bottom for the dateline, and this border stretches all the way across the bulletin, being drawn over the floated div.
I made an example fiddle here, you can see the problem. For some background info, all bulletins will be inside the div.bulletin_frame, the "main div" if you will. Within that there will be div.bulletin s. I have it configured so that they all have a solid border at the top except for the first one, so that there's a border between them all. (see the stylesheet)
Thanks!
CSS:
div.bulletin_profile
{
padding: 5px;
margin-right: 5px;
text-align: center;
float: left;
border-bottom: 1px gray solid;
border-right: 1px gray solid;
border-bottom-right-radius: 5px;
}
div.bulletin_dateline
{
padding: 5px;
font-family: monospace;
border-bottom: 1px gray solid;
}
div.bulletin_body
{
padding: 5px;
}
The borders aren't drawn over the div, they're behind it. The divider simply has no background.
To change this, simply add a background to .bulletin_profile:
div.bulletin_profile {
background:rgb(240,240,240);
}
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.