I'm trying to create an arrow icon for my navigation links in the header of my website, and I want it to work so that when you hover over the navigation link, and the menu drops down, an arrow icon to the right of it will go from an upright (0 deg) position, to a down (180) deg position. When I stop hovering the direct header title, and go to the dropdown list, the arrow immediately resets to a 0 degree position. How should I make it so then when the cursor is in the menu, the arrow stays down?
.header-nav-folder-title:after {
content: '\F107';
font-family: FontAwesome;
display: inline-block;
padding-left: 4px;
padding-right: 6px;
padding-top: 3px;
transform:rotate(0deg)};
.header-nav-folder-title:hover::after{
transition: transform 0.2s;
transform:rotate(180deg)};
Related
Sandbox link: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css
.line and .arrow are the classes you want probably. Click create event and you see how the arrows are too low, and the clickable area is below the actual button as well as on the button. It even goes outside of the main div, which is #secondPage.
For the clickable area, I can't find anything about reducing it.
For centering text I tried this as well as a few other display: table-cell and text-align: center way. https://www.codecademy.com/forum_questions/50c29d469bc1e14c8b001f64
Hi #secret This is happening because of the fixed height of button,
I made few changes in your CSS you can try with this one it's help you
.arrow {
border-radius: 2vh;
font-size: 2em;
font-weight: bold;
color: darkblue;
width: 5vh;
height: 2vh;
line-height: 0; /* 1. Change Line Height otherwise you want to remove height */
padding: 10px 0; /* 2. TOP - BOTTOM spacing */
cursor: pointer; /* 3. Show cursor this is clickeble */
}
I hope It's Help You :) Thanks
This problem occurs because your button has a fixed height, but the font-size is bigger in some screens. In order to fix this you should change your font-size and height to use the same metrics (e.g. both px,em,rem,vh etc) and make sure that the font-size will always be less than your height.
Things to remember when adjusting those two:
Padding also consumes some of your height
Line height must not be less than your font-size.
I have a navigation bar at the top of the page and I'm trying to get a box shadow to appear underneath it on scroll.
I've tried using .active and :active with no luck. I can force the shadow to appear in chrome devtools but can't get this to work otherwise on scroll.
.sidenav-breadcrumbs {
height: 45px;
font-size: 16px;
font-weight: bold;
background: red;
}
.nav-fixed-top {
position: fixed;
top: 100px;
right: 0;
left: 0;
z-index: 1020;
}
.shadow:active {
box-shadow: 0 0 10px rgba(0,0,0,0.4)!important;
}
Shadow should appear under bar on scroll but seems to only appear when clicking the bar.
Thank you if you can help.
Active selector applies to clicked element, that's why the shadow appears when you click the bar. There is no selector for scroll, so you should be using JavaScript to add the shadow class while scrolling.
document.addEventListener("scroll", function(){
addShadowClassToBar();
});
And since you probably want to remove the shadow after scrolling is finished you should also remove the class. Here is a previous question that deals with detecting scroll stop.
I use Wordpress with the UDesign theme which includes iconfonts and I use these on my website to show icons in small blue boxes, you can see them on this page.
http://www.whichgreekisland.co.uk/islands/corfu/beaches/agnos/
I had to customise the CSS to get it to display in the boxes, I found a tutorial online that did it with circles and I simply changed the border radius to make them squares with rounded corners. so it uses a class called .circle-icon which has the following css on it.
color: #FFF;
font-size: 2.4em;
background: #018ED7 none repeat scroll 0% 0%;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
padding: 6px;
line-height: 2.6em;
margin-right: 10px;
border-radius: 3px;
They display correctly on Chrome and Firefox, as in, the icon is in the centre of the box but in IE the bottom of the box is missing so the icon is at the bottom of the box and the box is too small.
I've tried changing the css but I can't get it to work. What am I doing wrong or is there a better way of getting these icons in the center of a small blue box with rounded corners?
Thanks.
The use of the <i> tag is wrong. In HTML, <i> should stand for alternate parts of text (usually render in italic) and so is an inline element. Sometimes it is used to render an icon, but it is a semantic missuse.
So if you use <i> to render an icon you should change his display mode to inline-block. Actually the size of your icon is just calculated from the size of the pseudo element :before, the line-height and the padding (which can render oddly on inline elements). So your width and height properties of 120px are not applied.
What you need to do is to add the following rules to get the same render as it currently is in Chrome/FF, but in inline-block:
i {
display: inline-block
width: 53px;
height: 48px;
}
i:before {
line-height: 48px; /* vertically center the icon */
}
My site is using fontawesome. On the site, one of the icons (fa-arrows-h) is wrapped in a span tag, basically like this:
<span id="myArrow">
<i class="fa fa-arrows-h"></i>
</span>
I have various styles set for this arrow in an external stylesheet, including a :hover transition. Other styles include font-size 41px and the arrow has position absolute. I have also styled the cursor to be a "pointer" and for the red arrow to become orange (using the CSS3 style: transition: all 0.5s ease 0s;) on hover.
EDIT: Here are all the CSS rules:
#myArrow {
display: none;
font-size: 41px;
position: absolute;
z-index: 100;
color: red;
transition: all 0.5s ease 0s;
}
#myArrow:hover {
color:orange;
cursor:pointer;
}
Here is some jQuery that fades the arrow In:
$("#myArrow").css({"left" : (o.left + 740) + "px", "top" : (o.top) + "px"}).fadeIn(500);
One annoying thing is that the hover effect occurs about 20px above/below the text. That is, when either the bottom of the cursor touches the arrow, or the tip of the cursor is roughly 20px below the arrow, the hover transition occurs.
I have tried various things, even setting the style for both the span and the i to
style="line-height:0;height:0"
and the arrow still appears, with the same hover issue as described above (I also tried this styling individually for both tags).
I thought the issue also might be with the css display, so I tried setting both the span and the i to
- block
- inline
- inline-block
with no success.
I also set both the tags to have padding:0 with no success.
Note that this 20px-away hover transition only occurs vertically; when approaching the arrow horizontally (from left or right) the hover transition occurs when the user has actually hovered over the icon.
Can anyone please suggest how I would make the hover transition occur when a user approaches this icon from above or below and actually hovers over the fontawesome icon, not when the cursor is 20px away?
While not super elegant, I simply changed the #myArrow's height and set its overflow to hidden then I used margins to position the i element within.
#myArrow {
font-size: 41px;
position: absolute;
z-index: 100;
color: red;
transition: all 0.5s ease 0s;
}
#myArrow:hover {
color:orange;
cursor:pointer;
}
#myArrow {
height:20px;
overflow:hidden;
}
#myArrow i {
margin-top:-10px;
display:block;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span id="myArrow">
<i class="fa fa-arrows-h"></i>
</span>
I'm currently working on a CSS Dropdown menu and I've run into the following issues:
Each successive sub menu overlaps its parent menu by an increasing amount.
Attempting to fix item 1 by setting the left attribute (each submenu already has position:absolute) does not work and throws off the position of the menu wildly.
Whenever a submenu is shown, the right padding is automatically increased causing a gap between the menu and the bottom border of the menu items.
In the CSS I use display: table-* (the star being any of the table-related display values) in order to make vertical centering of text easier and to more easily keep the selected menu item at the top of the list (see display: table-header).
I would really like to know both solutions and causes for the above issues.
For reference, I've created a fully functional JsFiddle.
I made a fiddle here http://jsfiddle.net/xUWdj/
Changes made:
Got rid of all the table displays, the only reason you were using it was for vertical alignment, you can utilize line-height on the <a>'s instead.
All submenu <ul>'s now are positioned based off it's parent by left: 100%; & top: 0;
You should now be able to style/position the rest of the menu to how you want it.
Edit:
Here's a version that allows you to continue using the table-group-header http://jsfiddle.net/HSh5n/2/
Changed li a { display: block; line-height: 30px; }
Added margins to move the ul's to -42px 0 0 130px
I guess the biggest thing with tables is that since they're inline elements, you can't assign position: relative to table-cells, so that's why you couldn't use the left or top properties. I haven't browser tested this, but I'd always double check if you go this route.
If you add right border to your li a{...} you can get an idea about what's causing the overlaps.
li a {
display: table-cell;
border-bottom: solid 1px #cccccc;
border-right: solid 1px #cccccc;
text-decoration: none;
color: rgba(89,87,87,0.9);
height: 30px;
padding: 5px;
vertical-align: middle;
cursor: pointer;
}