I'm currently making a website using a Tumblr theme. I want one of my links (Merchandise) to open a dropdown menu for different options. Is there a way to do this without switching the entire navigation to li elements? I can style it all after, I just have no idea how to do this without ruining the entire theme.
Thanks in advance.
#pages {
float: right;
}
#pages a {
float: right;
color: black;
margin: 22px;
padding: 5px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
font-size: 10px;
}
#pages a:hover {
color: #d95e40;
}
<div id="pages" class="desktop">
<h2 class="page">Contact</h2>
<h2 class="page">Merchandise</h2>
<h2 class="page">Videos</h2>
<h2 class="page">Lyrics</h2>
<h2 class="page">Releases</h2>
<h2 class="page">Shows</h2>
</div>
There's a useful site that has made a plugin just for this sort of situation
http://labs.abeautifulsite.net/jquery-dropdown/
On there you'll see the option to add a dropdown to an <a> tag.
Merchandise
Your actual dropdown list would then reside in the jq-dropdown-1 div. Or whatever you'd like to name it.
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="jq-dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
The plugin Does the rest, giving you a simple solution to <a> tag dropdowns after simply linking to the required scripts
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>
Which can be found on the GitHub page here >> https://github.com/claviska/jquery-dropdown
Related
I have the following code in HTML:
<div id="side">
<ul class="sideCol sideCol-fixed">
<li>
<div class="user-view" style="background-color: #141E30;">
<u><i><b>LINK TO EXTERNAL PAGE</b></i></u>
</div>
</li>
<div class="steps">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</ul>
</div>
and the following code in CSS:
#side li a:hover{
color: black;
}
I only recently added in the line <u><i><b>LINK TO EXTERNAL PAGE</b></i></u> and previously I had set the css so that when the cursor hovers over Link 1, Link 2 and Link 3, the text turns black, where previously the text is white.
The text for the "LINK TO EXTERNAL PAGE" anchor tag is also initally white, but unlike the other links I do not want it to turn black when I hover on it. I have tried adding an id to the anchor tag (<a id="newid" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>), and then adding css to that id in the stylesheet (code at bottom of question) to make it so that the text turns white when hovered over (thus aiming to make it not turn black) but this does not work and the text still turns black. Would anyone know how to achieve this?
#newid:hover{
color: white;
}
Selector that you tried to apply has lower css specificity.
Solution:
Use selector with higher specificity to override this style.
For example you can use:
.user-view > #newid:hover {
color: white;
}
or
#side #newid:hover {
color: white;
}
or
#side li .user-view a:hover {
color: white;
}
Here: https://specificity.keegan.st/ you can calculate your selector specificity.
#side li a:hover{
color: black;
}
Has specificity 1.1.2 where,
#newid:hover{
color: white;
}
Has specificity 1.1.0 so this style in other words, was less important and thus not applied.
Here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity you can read more about it.
Did you tried to add a css class instead?
<div id="side">
<ul class="sideCol sideCol-fixed">
<li>
<div class="user-view" style="background-color: #141E30;">
<a class="externallink" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
</div>
</li>
<div class="steps">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</ul>
</div>
CSS
.externallink:hover{
color: white;
}
use this to select you list item
<div id="side">
<ul class="sideCol sideCol-fixed">
<li>
<div class="user-view" style="background-color: #141E30;">
<u><i><b>LINK TO EXTERNAL PAGE</b></i></u>
</div>
</li>
<div class="steps">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</ul>
</div>
css:
.steps :hover {
/* your css code here */
color:black;
}
Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).
If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
You can check the documentation for more details :
If you’re using our SVG + JS framework to render icons, you need to do a few extra things:
Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.
As stated in the docs of Font Awesome of how to enable Pseudo class...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"
Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).
If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
You can check the documentation for more details :
If you’re using our SVG + JS framework to render icons, you need to do a few extra things:
Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.
As stated in the docs of Font Awesome of how to enable Pseudo class...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"
Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
I know the font library is loading because I was able to use <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li> and the font rendered properly (though not styled properly).
If you are using the CSS version read this: Font Awesome 5, why css content is not showing?
Using the last release of the Font Awesome 5 you can enable the use of pseudo-element with the JS version by adding data-search-pseudo-elements like below:
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
color: blue;
margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>
You can check the documentation for more details :
If you’re using our SVG + JS framework to render icons, you need to do a few extra things:
Enable Pseudo Elements
Using CSS Pseudo elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script /> element that calls Font Awesome.
Set Pseudo Elements’ display to none
Since our JS will find each icon reference (using your pseudo element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo element that’s rendered.
As stated in the docs of Font Awesome of how to enable Pseudo class...
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems::before {
font-family: "Font Awesome 5 Solid";
content: "\f058";
display: none;
}
.user::before{
font-family: "Font Awesome 5 Solid";
content: "\f007";
display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>
If you install fontawesome in your project using a package manager (I'm using yarn on a Rails project), you have to import not only the js resource but also the css resource:
import "#fortawesome/fontawesome-free/js/all"
import "#fortawesome/fontawesome-free/css/all"
I'm using the Bootstrap temple for the sticky footer and I'm trying to style the unordered list that is inside, but can't get the list to be inline.
HTML:
<footer class="footer">
<div class="container">
<p class="text-muted">
<div class="bottom-list">
<ul>
<li>Prevajanje</li>
<li>Lektura</li>
<li>Sodni prevodi</li>
<li>Tolmačenje</li>
</ul>
</div>
</p>
</div>
</footer>
CSS:
.footer .container .text-muted .bottom-list {
float: right;
}
Use the list-inline class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Source: http://getbootstrap.com/css/#type-lists
The CSS rule you have specified applies to the ul element. To inline a list you should target the li elements within the ul. For example
.bottom-list>li {
display: inline-block;
}
It is preferable to use predefined bootstrap classes though in this case list-inline.