I am using Font Awesome for this code and what I want is to change the ⬇️ icon to ⬆️ when I hover over the drop-down-list . Somehow I figured out to change it when we hover over its parent element. But how do I change it when we need to hover on the element outside its parent element like in this case. A help over it will be appreciated. Thanks :)
This is the result of my code
Here, after hovering over the drop down list, I need the arrow ⬇️ to turn ⬆️
.drop-down-list {
display: none;
}
.drop-down-menu:hover .drop-down-list {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: aliceblue;
border-radius: 9px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-width: 20%;
padding: 0.2rem;
margin-top: 0.2rem;
}
.btn:hover span {
display: none;
}
.btn:hover::after {
content: "\f106";
font-family: "FontAwesome" !important;
}
<head>
<script src="https://kit.fontawesome.com/722021f5b4.js" crossorigin="anonymous">
</script>
</head>
<body>
<div class="drop-down-menu">
<a class="btn" href="#">
Products <span><i class="fas fa-angle-down"></i></span>
</a>
<div class="drop-down-list">
<a class="drop-down-links" href="#">Link 1</a>
<a class="drop-down-links" href="#">Link 2</a>
<a class="drop-down-links" href="#">Link 3</a>
</div>
</div>
</body>
You can apply the hover trigger to the parent element and change the btn style like so:
.drop-down-list {
display: none;
}
.drop-down-menu:hover .drop-down-list {
display: flex;
flex-direction: column;
gap: 1rem;
background-color: aliceblue;
border-radius: 9px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-width: 20%;
padding: 0.2rem;
margin-top: 0.2rem;
}
.drop-down-menu:hover .btn span {
display: none;
}
.drop-down-menu:hover .btn::after {
content: "\f106";
font-family: "FontAwesome" !important;
}
<head>
<script src="https://kit.fontawesome.com/722021f5b4.js" crossorigin="anonymous">
</script>
</head>
<body>
<div class="drop-down-menu">
<a class="btn" href="#">
Products <span><i class="fas fa-angle-down"></i></span>
</a>
<div class="drop-down-list">
<a class="drop-down-links" href="#">Link 1</a>
<a class="drop-down-links" href="#">Link 2</a>
<a class="drop-down-links" href="#">Link 3</a>
</div>
</div>
</body>
Related
This is my website:
How to convert it to like this one example below:
I have tried:
text-align: start;
but that doesn't seem to work,
Is this an HTML or CSS issue?
I already have text-alight: center in my code, but for some reason, it doesn't works, how to solve this issue?
This is my code:
CSS
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
align-items: center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
HTML
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
Thank you in advance, I really appreciate your help
Before anything first understand how the icons www.fontawesome.com works.
There's only one simple thing to understand that is:
That the < i > tag you used here is getting commented out and a svg is been loaded to your code above the tag
<i class="sidebar-icon fas fa-user-graduate"></i>
Solution
Just add these Properties to your html
Padding-left: 30px or as per your requirement;
Justify-content: flex-start;
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
padding-left: 30px;
justify-content: flex-start;
align-items: center
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
New Class to be Added for svg
Added a fixed width for svg.
Margin-right to align the test in the same line
.sidebar ul li a svg{
margin-right: 15px;
width: 25px !important;
}
Run this Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
display: flex;
justify-content: center;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
padding-left: 30px;
justify-content: flex-start;
align-items: center
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
align-self: flex-start;
}
.sidebar ul li a svg{
margin-right: 15px;
width: 25px !important;
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
You can try using flex box and then doing justify-content to be space-between or space-evenly
You should do two things:
Add a new class to every icon in your sidebar, for instance:
<i class="sidebar-icon fas fa-user-graduate"></i>
Style that class by adding horizontal margin. Adjust the pixels as you see fit.
.sidebar-icon {
width: 1.5em !important; /* Prevent uneven width of icons */
margin-left: 16px;
margin-right: 16px;
}
This is the result
i see your problem you just simply need to add some css justify-content:center; , you use display flex that;s why text-align is not working,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>pomodone.app</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
text-align: center;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
align-items: center;
/* my chnages here */
justify-content:center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
margin-right: 5px;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
display: inline-block;
margin-right: 5px;
}
Checkout my code, Hope it will help you. :)
try to add float and margin to the icons
.sidebar ul li a i {
float:left;
margin:0 5px
}
.menuitem {
display: flex;
align-items: center;
justify-content: center;
}
change the div display to flex and try this.
please inform that I put menuitem to all the div class names.
What I am trying to do is make it so that the text can be shown over the image. I put the text in an h1 tag which is inside of a div inside of the body. However, for some reason the changes aren't registering. In-fact, any changes that I make to the text that I want to be in the center of the image, those changes aren't registering at all.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<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/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<title>Home Page</title>
<script type="text/javascript">
<script src="script.js" charset="utf-8"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="https://cdn.discordapp.com/attachments/770076532433354783/770076695368564776/vice-logoFlag1.png" width="50" height="50">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" id="homeWording" href="/Users/nixon/Documents/Website Development/Website 1 Project/home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Gang Database
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">The Ballas</a>
<a class="dropdown-item" href="#">The Families</a>
<a class="dropdown-item" href="#">Los Santos Vagos</a>
<a class="dropdown-item" href="#">Varrios Los Aztecas</a>
<a class="dropdown-item" href="#">Marabunta Grande</a>
</div>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" id="logout" type="submit">Log out</button>
</div>
</nav>
<body>
<div class="image">
<img src="https://cdn.discordapp.com/attachments/398526333480599563/720783925395456021/TC21.png" alt="" width="100%" height="350">
<h1>TEXT IN CENTER</h1>
</div>
</body>
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</html>
CSS:
body {
background-color: #212529;
}
.main {
background-color: #77857b;
width: 400px;
height: 400px;
margin: 7em auto;
border-radius: 1.5em;
box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
}
#signInLettering {
font-size: 34px;
font-family: Optima;
padding-top: 40px;
font-weight: bold;
color: #d8e7eb;
font-style: italic;
}
.un {
width: 76%;
color: rgb(38, 50, 56);
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
background: #d8e7eb;
padding: 10px 20px;
border: none;
border-radius: 20px;
outline: none;
box-sizing: border-box;
border: 2px solid rgba(0, 0, 0, 0.02);
margin-bottom: 50px;
margin-left: 46px;
text-align: center;
margin-bottom: 27px;
font-family: 'Ubuntu', sans-serif;
}
.pass {
width: 76%;
color: rgb(38, 50, 56);
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
background: #d8e7eb;
padding: 10px 20px;
border: none;
border-radius: 20px;
outline: none;
box-sizing: border-box;
border: 2px solid rgba(0, 0, 0, 0.02);
margin-bottom: 50px;
margin-left: 46px;
text-align: center;
margin-bottom: 27px;
font-family: 'Ubuntu', sans-serif;
}
#homeWording {
padding-right: 50px;
}
.image {
position: relative;
width: 100%;
}
h1 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
In your CSS:
.image {
position: relative;
width: 100%;
}
Possible Solution:
.image {
position: relative;
width: 100%;
text-align: center;
}
See here
Just use flexbox like this
Give a higher z-index to the H1 and change the positioning of the image to absolute.
See codepen https://codepen.io/thewhitegrizzzzli/pen/xxOqdGM
.image {
position: relative;
width: 100%;
display:flex;align-items:center;justify-content:center;
height:350px;
}
.image img {
position:absolute;top:0;
}
h1 {
z-index:10;
}
I'm trying to set up a navbar that contains several items aligned to the right.
The problem is that when I click on the "notification" icon, I have my dropdown displayed, but my icons move in the navbar instead of staying fixed, I don't understand why
This is my code :
HTML :
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary justify-content-end">
<ul class="navbar-nav menu-right">
<div class="child child-right">
<!-- Parameters item -->
<li class="nav-item">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<div class="dropdown-menu parametres" aria-labelledby="dropdownMenuMessage">
<a class="dropdown-item" href="#">My profile</a>
<a class="dropdown-item" href="#">Help</a>
<a class="dropdown-item" href="#">Setting</a>
</div>
</li>
<!-- Notifications item -->
<li class="nav-item">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu notifications" aria-labelledby="dropdownMenuMessage">
<div class="notifications-header">
<i class="fa fa-bell"></i>
Notifications
</div>
<!-- Notification content -->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="notification-content">
<div class="icon">
<i class="fas fa-check text-success border border-success"></i>
</div>
<div class="content">
<div class="notification-detail">Lorem ipsum dolor sit amet consectetur adipisicing
elit. In totam explicabo</div>
<div class="notification-time">
6 minutes ago
</div>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-center" href="#">View all notifications</a>
</div>
</li>
</div>
</ul>
</nav>
SASS:
.navbar {
overflow: visible;
height: 56px;
z-index: 9999;
}
.notifications {
max-width: 250px;
margin-left: -200px;
margin-top: 5px;
.dropdown-item {
padding: .25rem 1rem;
}
.notifications-header {
padding: 0 1rem;
}
.notification-content {
display: flex;
.icon {
width: 40px;
height: 40px;
i {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
}
}
.content {
line-height: 1.6;
padding-left: 5px;
width: calc(100% - 40px);
.notification-time {
font-size: .7rem;
color: #828282;
}
.notification-detail {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.child {
display: flex;
flex-flow: row nowrap;
flex-grow: 0;
justify-content: flex-start;
align-items: stretch;
}
.child.child-right {
flex-grow: 1;
justify-content: flex-end;
}
.child>li{
padding-right: 50px;
}
And the jsfiddle : https://jsfiddle.net/kiuega/beat2zmn/11/
Can someone help me please ?
Styles are overridden by navbar.scss like drop-down is of static pos instead of absolute so here is the solution
Add these styles to you style sheet
.child > li {
padding-right: 50px;
position: relative;
}
.navbar-nav .dropdown-menu {
position: absolute;
float: none;
}
check margins and padding(in the child) check with the inspect element and see witch element change his position
If you open the devtools in your browser then you will see these classes on the dropdown panel:
.navbar-nav .dropdown-menu
(overwritten by navbar.scss)
If you remove the 'position: static', then it will work as expected.
And play with the top and left properties to get the right position.
In my project I have footer with image as background.
I set it inside css. You can see it below. It looks nice only in big screen devices but ugly in mobile screen. How to make image responsive?
I don't have much experience in frontend and I would like to know what are the options?
I use bootstrap 4 by the way.
Here the link to jsfiddle.
/*
* START: Footer
*/
footer {
background: url('http://enjoyjumping.kz/static/img//footer.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 500px;
bottom: 0;
position: absolute;
}
footer .row {
align-items: flex-end;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.social {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.social__button {
display: block;
width: 70px;
height: 70px;
border-radius: 100%;
border-color: #fff;
position: relative;
cursor: pointer;
margin: 5px;
text-align: center;
}
.social__button i {
display: inline-block;
position: absolute;
left: 0;
top: 0;
height: 70px;
line-height: 70px;
width: 70px;
font-size: 30px;
z-index: 2;
transition: 0.3s;
color: black;
border: 2px solid;
border-radius: 100%;
}
.social__button i:hover {
color: white;
}
.copyright {
margin-bottom: 2.1rem !important;
font-size: 18px;
font-weight: bold;
}
.menu-link {
color: black !important;
font-weight: bold;
}
.menu-link-li {
margin: 10px;
}
.footer-menu {
margin-bottom: 0.7rem !important;
}
/*
* END: Footer
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm text-center footer-menu">
<ul class="list-unstyled">
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/about/">About Us</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" data-toggle="modal" data-target="#citiesModel" style="cursor: pointer;">Our clubs</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/coaches/">News</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/bonus/">Events</a>
</li>
</ul>
</div>
<div class="col-sm text-center">
<div class="flex-container">
<div class="w-100">
<div class="social">
<a href="#" class="social__button facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social__button instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="social__button vk">
<i class="fa fa-vk"></i>
</a>
<a href="#" class="social__button youtube">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
<div class="w-100">
<span>+7(701)</span><strong>262-47-50</strong>
</div>
</div>
</div>
<div class="col-sm text-center">
<p class="copyright">Copyright © 2018 example.com</p>
</div>
</div>
</div>
</footer>
You need to change the background-size and background-position attributes of <footer>:
footer {
background: url('http://enjoyjumping.kz/static/img/footer.png') no-repeat top center /cover;
}
See it working: https://jsfiddle.net/7mejchb8/11/
Edit, based on comments: See this example on how to keep footer glued to the bottom of the page on all devices, while allowing it to have a variable height, without using position:absolute: https://jsfiddle.net/websiter/d4n1sxop/
CSS behind it is:
body {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 500px;
}
I've been trying to figure out how to produce this in CSS:
However, when I've tried this thus far, it's only partially been on track:
How can I fix the below CSS and HTML so that it works as a stacked text meter properly? I do have Bootstrap, and I'm using SCSS/SASS.
A Pen with the same code, including the full menu, shows the same issue:
https://codepen.io/anon/pen/zLYWZR
.buFontSize {
font-size: 11px;
padding: 0px;
}
.pointButton {
display: block;
border: rgba(255, 255, 255, 0.534) 1px solid !important;
justify-content: center;
padding: 0px !important;
}
.buttonBlock {
display: block;
}
<nav class="navbar navbar-expand navbar-dark">
<div class="navbar" id="navbarText">
<a class="navbar-brand navBrand" href="#">Link One</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link Two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link Three</a>
</li>
</ul>
<ul class="navbar-nav float-right">
<span class="btn pointButton">
<div class="buttonBlock">
<div class="row">
<span class="buFontSize">Games</span>
</div>
<div class="row">
<span class="buFontSize">100000</span>
</div>
</div>
</span>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas faSize fa-user-friends"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="far faSize fa-envelope"></i></a>
</li>
</ul>
</div>
</nav>
You can use a button group with a br:
body {
background-color: black !important; /* test only */
}
.btn-group .btn {
background: transparent;
color: #ffffff;
border: 1px solid #ffffff;
line-height:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
<div class="btn">
Games<br>
10000
</div >
<div class="btn">
Points<br>
000000
</div >
</div>
Example bootply
.buFontSize {
font-size: 11px;
color: #fff;
padding: 0px;
}
.pointButton {
display: block;
border: rgba(255, 255, 255, 0.534) 1px solid;
background: #000;
justify-content: center;
padding: 0px;
}
.buttonBlock {
display: block;
padding: 0px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<span class="btn pointButton">
<div class="buttonBlock">
<div class="row mb-2">
<div class="col-md-12">
<span class="buFontSize">Games</span>
</div>
<div class="col-md-12">
<span class="buFontSize">100000</span>
</div>
</div>
</div>
</span>
try this
body{
background-color: black;
}
.buttonBlock{
float: left;
margin: 0;
padding: 0;
border: 1px solid white;
width: 120px;
text-align: center;
display: inline-block;
color: white;
}
.buttonBlock > span{
display: block;
}
.buttonBlock:first-child{
border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-ms-border-radius: 5px 0 0 5px;
-o-border-radius: 5px 0 0 5px;
}
.buttonBlock:last-child{
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-ms-border-radius: 0 5px 5px 0;
-o-border-radius: 0 5px 5px 0;
}
.buttonBlock:not(:first-child){
border-left: 0;
}
<span class="btn pointButton">
<div class="buttonBlock">
<span class="title">First</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Second</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Third</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Fourth</span>
<span class="points">100000</span>
</div>
<div class="buttonBlock">
<span class="title">Fifth</span>
<span class="points">100000</span>
</div>
</span>
Maybe Use
.somewrapperclass{
display: flex;
flex-flow: wrap row;
align-items: flex-start;
}
Don't use display block as there is a better alternative, check this complete guide to flexbox