I'm very new to coding and have been just trying to code in my spare time. I have a code that when I go to view it has an obvious delay in the CSS. When you first load it for about a second the background will show as solid pink, the font changes, and the social media icons do not appear at the bottom of the screen. I have tried to search through here for answers, but the situations I've found that are similar to mine I didn't quite understand the answers as I have only been coding for about 3 weeks now.
Below is my HTML code and my CSS code:
/* BODY */
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
/* FOOTER */
a {
color: #8675a9;
}
a:hover {
color: #c3aed6;
}
.footer {
font-size: 80%;
margin-top: 6%;
margin-bottom: 0;
}
.social-media-icons {
word-spacing: 1.5rem;
padding-bottom: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:dionna#paletteclouds.com"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
</body>
</html>
Any help or suggestions would be much appreciated!!
Try adding an inline style like this:
<body class="cover-body" style="background-color: #ffd5cd;">
It makes it just that little bit faster and seems to prevent the flicker.
Update your css too:
.cover-body {
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
https://jsfiddle.net/e23udzk8/
How pages normally load is as follow:
HTML render first then css is called.
So here your image is called later (the few secs delay that you wait between html render and css), so a hack I use would be having a hidden image tag with the background source so the image source used in the background image will be loaded in the html render therefore faster and causing no delay until css load.
Also please notice that one reason of the delay is the huge size of the image so reducing the image size will decrease the loading time as well.
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
img {
display: none; //Added Code
}
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:dionna#paletteclouds.com"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
<img src='https://i.ibb.co/vPn6tqR/clouds.jpg'/> //Added Code
</body>
</html>
Related
I want to create a CSS class that, when applied to a div or a p element will place that text in a colored box with an icon based on a unicode character vertically centered to the left of the text. This is to use to create "To Do", "Note", "Warning" type call outs.
For example I have this so far:
.todo {
background-color: lightyellow;
float: right;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
.todo:before {
content: "\2714";
font-size: 250%;
}
The usage of this class:
<div class="todo">
This is something that really needs to be done.
Even if you don't want to still do it.
</div>
Gives me a result like:
What I would like to do is make the check-mark bigger (my font-size term seems to be ignored) and place it vertically centered in the box and to the left of all text. Can this be done without requiring styling or
other elements in the div itself?
Well, you started right with :before but use position to define its position and alignment.
.tick{
padding-left: 15px;
position: relative;
}
.tick::before {
content: '\2713';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}
<p class="tick">To do</p>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
ul {
background-color: lightyellow;
float: left;
border: solid black 1px;
padding: 10px;
max-width: 30%;
}
ul li {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: 500;
}
ul .icon {
float: left;
font-size: 22px;
padding: 0 15px 0 0;
}
</style>
</head>
<body>
<ul>
<li>
<i class="fa fa-check icon"></i>
<p>This is something that really needs to be done. Even if you don't want to still do it. This is something that really needs to be done. Even if you don't want to still do it.</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have a jumbotron bootstrap width that covers the whole page. I want to implement a style where it doesn't covers the whole page. Is there any attribute I can apply that I can adjust the width?
/* style -- this is the stylesheet */
.jumbotron {
font-size: 17px;
cursor: pointer;
width: 5px;
}
.mycustom-jumbotron {
border:10px solid #003366;
width: 300px;
margin: 0 auto
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="jumbotron mycustom-jumbotron text-center">
<h1>Bootstrap</h1>
<p>Bootstrap Web Design</p>
</div>
.jumbotron-test {
font-size: 17px;
cursor: pointer;
width: 50%;
text-align:Center;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="jumbotron jumbotron-test">
<h1>Jumbotron</h1>
<p>Testing Jumbo tron</p>
</div>
Trying to code a simple webpage and am learning html. I wonder why my simple styling code for the makes no changes. Here it is below.
<!DOCTYPE html>
<html>
<head>
<!-- SE copied from old site -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/topnav-index.css">
<!-- abv css I created myself, just the TopNav bar -->
<style>
<!-- this is for page wide style -->
<!-- define all paragraph font for main pg -->
p {
color: red;
text-align: left;
font-family: palatino;
font-size: 16pt;
background-color: #909090;
<!-- margin: 4 prop is top, R, bott, L -->
margin-left: 32px;
margin-top: 30px;
<!-- margin: 20,25,35,40; -->
padding-left: 12%;
padding-top: 10%;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Title</h2>
<p>Responsive Topnav Example</p>
</div>
<!-- main content -->
<p>B This site explores the connection between XXX and the
historical events...</p>
Now the Top Nav bar works but none of the formatting for the p text seems to do anything. It's in the header & I understand the p, in the greater/less than signs, acts as a specialty container of it's own...
in css you should use /* */ for comment and not<!--- -->
p {
color: red;
text-align: left;
font-family: palatino;
font-size: 16pt;
background-color: #909090;
/* margin: 4 prop is top, R, bott, L */
margin-left: 32px;
margin-top: 30px;
/*margin: 20,25,35,40; */
padding-left: 12%;
padding-top: 10%;
}
I am trying to make a site, using a background image:
(CSS)
body {
text-align: center;
background-image: url("../img/clouds.jpg");
background-size: 100% 760%;
}
and I also have on the top of the page this:
(HTML)
<div class="pageTitle">
<p>Title of Page basically</p>
</div>
(CSS)
.pageTitle {
font-size: 200%;
}
When I try to make the font-size bigger, the background image grows as well (looks like it's zoomed in, basically).
I suppose this has to do with the usage of percentages, but even when using em notation or px I still get the same result.
How can I make the pageTitle bigger without altering my background image's size?
What seems to make it work is altering the background-size: 100% 760%; to background-size: 100% 250%; (in my case), but still, whenever an element is altered it needs fixing as a whole.
Code Snippet:
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: 100% 250%;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
without set the height of a body the precent of height of the background is as a height of a contant. so 760% background-height is text-height*7.6. it is why when you change the size of the image the size of the image grow too.. what you can do is set
html, body{
height:100%;
}
and then it wil calculate precent of the whole page size (so in your case you will see only 1/7.6 of the height of the image).
There's an article, which describes the exact problem, that you have.
One of the solutions is to provide the following attribute to body. This will ensure everywhere is covered:
body {
...
background-size: cover;
}
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
html, body {
height: 100%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: cover;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I would like to style a language select button for my website. This is the design of what it should look like:
I am using Bootstrap 3.
How can I achieve that? Any help is appreciated!
EDIT
Solved it by creating a custom dropdown using css+jquery, see the result below.
There were many useless comments and downvotes. Useless comments should have downvote option as well.
At least giving some advice would have been helpful.
But anyway, got my problem sorted.
<!DOCTYPE html>
<html>
<head>
<title>Custom dropdown</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Raleway|Rancho" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Custom dropdown */
.custom-sel a {
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px;
text-align: left;
font-family: Raleway;
color: #546e7a;
font-size: 15px;
font-weight: 700;
line-height: 24px;
display: block;
}
.custom-sel a:hover {
text-decoration: none;
background-color: #EDF0F2;
color: #ffffff;
}
.custom-sel a.selected {
background-color: transparent;
}
.custom-sel a.selected:hover {
background-color: transparent;
color: #546e7a;
}
.hidden {
display: none;
}
.lightblue {
color:#03a9f4;
margin-left: -4px;
}
.show-sel {
background-color: #ffffff;
box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
}
.custom-sel {
margin: 30px;
display: inline-block;
}
/* Custom dropdown */
</style>
<script type="text/javascript">
$(document).ready(function () {
// Show dropdown
$('.selected').click(function () {
$('.custom-sel').addClass('show-sel');
$('.custom-sel a').removeClass('hidden');
});
// Hide dropdown when not focused
$('.custom-sel').focusout(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
}).blur(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
});
});
</script>
</head>
<body>
<div class="container">
<!-- Custom dropdown -->
<div class="custom-sel">
<a class="selected" href="#">ENG <i class="fa fa-caret-down lightblue" aria-hidden="true"></i></a>
<a class="hidden" href="#">EST</a>
<a class="hidden" href="#">RUS</a>
<a class="hidden" href="#">FIN</a>
</div>
</div>
</body>
</html>
Here's the result I'm currently happy with:
https://jsfiddle.net/manb0hzh/