I'm looking at this CSS menu https://codepen.io/StephenScaff/pen/bVbEbJ and it seems to do what I want apart from the '>' image/icon at the end of each menu option.
Is there a way to only show this image/icon if there is a submenu/flyout ?
I've worked it it is being added using
.sidebar-nav>ul>li>a:after {
content: "";
font-family: ionicons;
font-size: 0.5em;
width: 10px;
color: #fff;
position: absolute;
right: 0.75em;
top: 45%;
}
But I don't know how to only apply that to the menu entries with sub entries.
Thanks
You can add a class "has-sub-entries" to the links that should have it.
.sidebar-nav>ul>li>a.has-sub-entries:after {
}
so you remove the :after element on
.sidebar-nav>ul>li>a:after
Related
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
I would like to use Disqus comments system as a guestbook on a wedding website based on a bootstrap/html5 template.
Since the content on the website is personal, i would like to remove the share links for Facebook, Twitter etc which appear above the comments box and below each individual comment.
Screenshot here, http://imgur.com/pkvUSoF
Is there a way to achieve this by hiding the share elements in CSS ?
I understand the new Disqus uses an iframe, however there is a similar thread for hiding the Disqus footer linked here and the CSS code below does work.
#disqus_thread{
position: relative;
}
#disqus_thread:after{
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0px;
background:white;
}
Using the 'inspect element' in Chrome, I am able to hide the share elements using 'display:none'
.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}
and
.post-content footer .share {
position: relative;
display: none;
}
Could anyone help me with the correct code/syntax to add this to my styles.css to hide the Social Sharing buttons.
Thanks !
As described in the article its not possible.
https://help.disqus.com/customer/portal/articles/545277
Reason: Its using iframe to render the comments to prevent XSS
Even though i am not recommending you to do this but there is a way to do so.
Please read terms and conditions before doing any of this.
<div id="disqus_thread"><div>
<style>
.hide-social-discuss {
background: white; // change color according to your site back.
height: 20px;
position: relative;
width: 80%;
top: -60px;
}
<script>
//add this to script
$("#disqus_thread").append("<div class='hide-social-discuss'></div>")
</script>
Same CSS you mentioned, but adjusted to cover share buttons.
Please read disqus terms and conditions before using this.
disqus_thread {
position: relative;
}
#disqus_thread:before {
content: "";
display: block;
height: 20px;
width: 80%;
position: relative;
bottom: -72px;
background: white; //replace with your background colour
}
You won't be able to use featured comments anymore, but hey, it works
looks like this for me ¯_(ツ)_/¯
I just discovered this strange problem on an <a> element. I wanted to make a css only button with a "pushed down" animation.
More or less something like this:
.button:active {
position: relative;
top: 10px;
}
The problem is that link doesn't seem to work if you do the mousedown below the text and release when the text has moven below the pointer (the animation runs correctly but onclick or href don't work). You can see the "bug" or whatever it is in this fiddle:
http://jsfiddle.net/H9RgD/
I already tried different things, like using padding to create the animation but it still doesn't work. I can confirm it doesn't in Chrome 22 (latest version as of today). Why does this happen? How can I get around this problem to animate a css only button?
Cannot answer "why" (I think it may be a bug). It seems like I recall encountering a similar issue before with Chrome, and came up with a similar workaround as I offer here. Somehow, adding the "overlay" of the pseudo-element causes the whole to become "clickable." In your case, I noticed that if I clicked toward the top of the div, it also did not register, but when I added the top adjustment to the :before in the :active state, that seemed to be resolved also.
This fiddle seems to have a working solution. HTML is the same as your fiddle (except I added the content to the alert):
HTML
<div class="tabs-container">
<div onclick="alert('here')">Click below the text</div>
</div>
CSS
.tabs-container div{
display: inline-block;
background: whitesmoke;
padding-bottom: 5px;
font-size: 25px;
border-bottom: 5px solid grey;
position: relative;
}
.tabs-container div:active{
top: 10px;
border-bottom: 0;
}
.tabs-container div:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.tabs-container div:active:before {
top: -10px;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
highlight the navigation menu for the current page
I'm working on a menu consisting of several DIVs, each with a unique CSS ID. The :hover selector has been used in CSS to try to give each div a different style when its corresponding page is being viewed, but it doesn't seem to be taking effect. My CSS and HTML can be seen in this JSFiddle. Basically, since these divs are being used to create a menu, I'd like the "active" class to be added to the div when its hyperlinked page is being viewed (when someone is on my "Home" page, I'd like the active style to be applied to the "Home" menu div).
#pagebuttonhome {
width: 130px;
height: 30px;
background-color: #ffe0e8;
position: absolute;
overflow: hidden;
left: 30px;
bottom: 0px;
font-size: 17px;
letter-spacing: 2px;
text-align: center;
line-height: 30px;
color: #dc2d18;
}
#pagebuttonhome:hover {
background-color: #dc2d18;
color: #ffe0e8;
height: 40px;
cursor: pointer;
}
#pagebuttonhome.active {
background-color: #dc2d18;
color: #ffe0e8;
height: 40px;
cursor: pointer;
}
<div id="pagebuttonhome">HOME</div>
I appreciate any help!
One way to get around it is to add a unique id to the body on each page. For example, <body id="homelink"> on the home page, <body id="aboutlink"> on your about page (if you have one) etc. Then, replace the #pagebuttonhome.active selector with
#homelink #pagebuttonhome,
#aboutlink #pagebuttonabout
and it will select and highlight the link for the page you're on without you needing to use javascript.
http://jsfiddle.net/MEnKR/11/
I am developing a website and I have trouble with legend field which is overlapping with the table fields. I had posted the code on http://www.daniweb.com/web-development/web-design/html-and-css/threads/351601.
I searched google for this kind of error but could not resolve it.
remove position: absolute; from the following css selector
#registerForm legend {
color: #999999;
float: left;
font-size: 1em;
left: 1em;
line-height: 1.3em;
margin: 0;
padding-top: 1.25em;
position: absolute;
width: 16%;
}
Demo at http://jsbin.com/ivoyi4
After removing the position:absolute It looks better in the Firefox but in the safari the word is wrapped to the next line i.e., "User" in the first line and "information" in the second line above the table. What I wanted is to push the user information to the left side where the table starts but it acts weird in firefox with the position as absolute.