Fix position of elements when hovering on other elements - html

I have some icons inside li's of a ul list. I want to make font-size bigger when hovering on icons.
The problem is When I hover over the icons, the position of the other icons changes.
css & html:
li a:hover {
text-decoration: none;
}
i.s-m-i {
color: black;
transition: 0.3s;
font-size: 30px;
}
i.s-m-i:hover {
color : blue;
font-size: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br>
<ul class="list-unstyled text-center">
<li class="d-inline">
<a href="#">
<i class="fa fa-telegram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-instagram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-github s-m-i" ></i>
</a>
</li>
<li class="d-inline mr-1 ml-3">
<a href="#">
<i class="fa fa-linkedin s-m-i" ></i>
</a>
</li>
</ul>
</html>
How should I fix other icon's position?
Thank you.

try this instead,
use transform scale property instead of change font-size in hover
li a:hover {
text-decoration: none;
}
i.s-m-i {
color: black;
font-size: 30px;
transition: all .3s ease-in-out;
}
i.s-m-i:hover {
color : blue;
transform: scale(1.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<br>
<ul class="list-unstyled text-center">
<li class="d-inline">
<a href="#">
<i class="fa fa-telegram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-instagram s-m-i"></i>
</a>
</li>
<li class="d-inline ml-3">
<a href="#">
<i class="fa fa-github s-m-i" ></i>
</a>
</li>
<li class="d-inline mr-1 ml-3">
<a href="#">
<i class="fa fa-linkedin s-m-i" ></i>
</a>
</li>
</ul>
</html>

Related

Trying to introduce Icons into my work but I am not able to change the color of the Icons(font-awesome)

.social-icon{
color: white;
}
.fa-solid{
color: var(--primary-color);
}
<div class=" col-6">
<i class="fa-brands fa-twitter fa-40x social-icon"></i>
<i class="fa-brands fa-facebook fa-40x social-icon"></i>
<i class="fa-brands fa-instagram fa-40x social-icon"></i>
</div>
<div>
<a class="carousel-control-prev" href="#testimonial-cards" data-bs-slide="prev">
<span class="fa fa-solid fa-circle-chevron-left fa-1x carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonial-cards" data-bs-slide="next">
<span class=" fa fa-solid fa-circle-chevron-right fa-1x carousel-control-next-icon"></span>
<span class="sr-only">next</span>
</a>
</div>
I have been trying to change the social media and control icon colors but I am not able to affect them. Check the code and kindly assist. Thank you.
With little information, it's unclear which CSS rule you want to apply:
.social-icon{
color: white;
}
.fa-solid{
color: var(--primary-color);
}
Assuming, you need .fa-solid to apply, just increase the specificity of the selector in this way:
i.fa-solid{
color: var(--primary-color);
}
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Firstly you need to hook up fontawesome appropriate ;-) Then you can manipulate it according to your preferences ;-)
.social-icon {
color: blue;
}
.fa-solid {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="main.css" />
<title>Icons</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="col-6">
<i class="fa-brands fa-twitter fa-40x social-icon"></i>
<i class="fa-brands fa-facebook fa-40x social-icon"></i>
<i class="fa-brands fa-instagram fa-40x social-icon"></i>
</div>
<div>
<a class="carousel-control-prev" href="#testimonial-cards" data-bs-slide="prev">
<span class="fa fa-solid fa-circle-chevron-left fa-1x carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonial-cards" data-bs-slide="next">
<span class="fa fa-solid fa-circle-chevron-right fa-1x carousel-control-next-icon"></span>
<span class="sr-only">next</span>
</a>
</div>
</body>
</html>

unable to move text up to match boxicon bootstrap

I have the code below:
<div class="vertical-nav" id="sidebar">
<div class=" px-3 mb-4">
<div class="media d-flex">
<div class="media-body">
</div>
</div>
</div>
<ul class="nav flex-column align-items-start mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-white font-italic">
<i class="navbar-icon">
<box-icon name='upload' color='#ffffff' size="md"></box-icon>
</i>
<i class="fa fa-th-large text-primary fa-fw"></i>
<span class="navbar-text" >upload</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-white font-italic">
<i class="navbar-icon">
<box-icon name='file-blank' color='#ffffff' size="md"></box-icon>
</i>
<i class="fa fa-th-large text-primary fa-fw"></i>
<span class="navbar-text">manage</span>
</a>
</li>
Ignore the unclosed divs just a code sample. The code works fine in theory but I am unable to get the text for each navbar item aligned with the icon. I tried using margin-bottom on navbar-text but it did not have any effect (neither did padding). I tried moving the icon down with margin-top and that had no effect.
Any ideas?
You need to use Flex on the a item inside the li item. For example:
#import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css';
li a{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.text-primary {
margin-right:10px;
font-size:50px;
}
<div class="vertical-nav" id="sidebar">
<div class=" px-3 mb-4">
<div class="media d-flex">
<div class="media-body">
</div>
</div>
</div>
<ul class="nav flex-column align-items-start mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-white font-italic">
<i class="navbar-icon">
<box-icon name='upload' color='#ffffff' size="md"></box-icon>
</i>
<i class="fa fa-th-large text-primary fa-fw"></i>
<span class="navbar-text" >upload</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-white font-italic">
<i class="navbar-icon">
<box-icon name='file-blank' color='#ffffff' size="md"></box-icon>
</i>
<i class="fa fa-th-large text-primary fa-fw"></i>
<span class="navbar-text">manage</span>
</a>
</li>
</ul>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=
, initial-scale=1.0"
/>
<title>Document</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<style>
.navbar ul {
display: flex;
flex-direction: column;
}
.navbar ul li {
list-style: none;
margin-bottom: 2rem;
cursor: pointer;
}
</style>
<header>
<nav class="navbar">
<ul>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-search"></i>Search</li>
<li><i class="fa fa-globe"></i>menu</li>
<li><i class="fa fa-envelope"></i>message</li>
<li><i class="fa fa-sign-out"></i>logout</li>
</ul>
</nav>
</header>
</body>
</html>

Trying to centre navbar content [duplicate]

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I am currently using Bootstrap and it is giving me quite the headache. I'm having a lot of trouble understanding it but feel determined to use it in order to be able to make my website responsive and therefore support mobile devices.
I am trying to centre my navbar content but am having the hardest time doing so. Everything I have tried it never moves and always stays attached to the right with a margin on either side. Could someone please point me in the right direction to fixing this?
* {
box-sizing: border-box;
}
body {
background-color: #393939
}
/*
-=-=- NAVIGATION BAR -=-=-
*/
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
}
.navlink {
display: inline-block;
color: #C9C9C9;
padding: 10px;
padding-bottom: 10px;
background:
linear-gradient(white, white)
bottom
/100% 0px
no-repeat;
transition: 0.2s all;
}
.navlink:hover {
color: #FFF;
text-decoration: none;
background-size: 100% 4px;
}
.active {
color: #FFF;
}
/*
-=-=- SOCIAL MEDIA -=-=-
*/
.social-icon {
float: right;
font-size: 1.5em;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav">
<div class="container">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!-- <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
</div>
</nav>
</header>
<!-- JavsScript -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Since you are using bootstrap 4, you can simple use bootstrap 4's flex-box utility classes to center your navbar links, in your case you just have to add these classes to parent container of your links which is div with class container.
<nav id="header-nav" class="navbar-nav">
<div class="container d-flex justify-content-center">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<!-- <a class="social-icon navbar-text" href="#discord"><i class="fab fa-discord"></i></a>-->
</div>
</nav>
in above code the d-flex class makes the div as a flex-box and justify-content-center aligns its content to center.
Hope it helps!
The elements with .navlink class are inline elements which means they respond to the text-align: left|center|right css property on the parent container.
Bootstrap have a class to apply the css property text-align: center, it's text-center, apply this class to the container element and the nav items will center align*.
<div class="container text-center">
<a class="active navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="navlink" href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
</div>
As your navlink elements have display: inline-block by default, you can add a text-center class to the container div and those elements will be centered.
<div class="container text-center">
...
</div>

Boostrap 4 sticky footer height issues

I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.
What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.
<!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>Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 200px; /* bottom has to be the same as footer height */
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.copyright-container
{
padding: 10x;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="2.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign up</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container"><p>Page Content</p></div>
<footer class="section footer-classic context-dark bg-image" style="background: #000000;">
<div class="container">
<div class="row row-30">
<div class="col-md-4 col-xl-5">
<div class="pr-xl-4">
<hr>
<div class="text-center center-block">
<p>You can follow us on:</p>
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<hr>
</div>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Site</h5>
<ul class="nav-list">
<li>About</li>
<li>Help</li>
<li>Accessibility</li>
</ul>
</div>
<div class="col-md-4 col-xl-3 footer-list">
<h5>Legal</h5>
<ul class="nav-list">
<li>Terms of Service</li>
<li>Privacy Policy</li>
<li>Cookie Policy</li>
</ul>
</div>
</div>
</div>
<div class="row copyright-container">
<p class="rights">
<span>©  </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
</div>
</footer>
</body>
</html>
I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you're going to use Bootstrap's grid system, then it's a good idea to follow the structure that they recommend in order to have a fully responsive website.
Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.
The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:
<!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>Sticky Footer inspired by Bootstrap Examples</title>
<!-- Bootstrap 4 CDN as of 01/17/2020 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fontawesome 4.7 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,
body {
height: 100%;
}
.fa {
color: white;
}
</style>
</head>
<body class="d-flex flex-column">
<!-- Main page content -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Main container</h1>
</div>
</main>
<!-- Respoonsive footer using Bootstrap's grid layout -->
<footer class="footer mt-auto py-3 bg-dark">
<div class="container">
<div class="row">
<div class="col align-self-center">
<i class="fa fa-twitter-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i>
<i class="fa fa-envelope-square fa-4x" aria-hidden="true"></i>
</div>
<div class="col">
<h5>Site</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">About</a></li>
<li><a class="text-muted" href="#">Help</a></li>
<li><a class="text-muted" href="#">Accessibility</a></li>
</ul>
</div>
<div class="col">
<h5>Legal</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Terms of Service</a></li>
<li><a class="text-muted" href="#">Privacy Policy</a></li>
<li><a class="text-muted" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
Working example here
I have edit your css & HTML
html,body, .wrapper {
position: relative;
height: 100%;
}
.context-dark, .bg-gray-dark, .bg-primary
{
color: rgba(255, 255, 255, 0.8);
}
.footer-classic
{
padding-top: 10px;
}
.copyright-container
{
padding: 10x;
}
https://jsfiddle.net/lalji1051/r5aqxetv/7/

How can i have a horizontal FAB in a vertical FAB using Materialize?

I am trying to create a horizontal FAB inside a vertical FAB using Materialize. The code below works almost perfectly, but whenever I hover over the main FAB, it will toggle the main FAB and second FAB, but I only want to open the second fab when I hover over the share button. (The second FAB button)
I am using Materialize 0.100.2.
I also created a working pen here.
.FAB2 {
position: relative !important;
display: inline-block;
right: 24px !important;
right: 17px !important;
bottom: 0 !important;
padding: 0 0 0 25px !important;
}
.FAB2-li {
margin: 0 15px 0 0 !important;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="fixed-action-btn horizontal FAB2">
<!--Share button-->
<a class="btn-floating red">
<i class="large material-icons">share</i>
</a>
<!--End of share button-->
<ul>
<li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</li>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
.FAB2 {
position: relative !important;
display: inline-block;
right: 24px !important;
right: 17px !important;
bottom: 0 !important;
padding: 0 0 0 25px !important;
}
.FAB2-li {
margin: 0 15px 0 0 !important;
}
li.fixed-action-btn.horizontal.FAB2>ul {
opacity:0 !important;
transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
opacity:1 !important;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="fixed-action-btn horizontal FAB2">
<!--Share button-->
<a class="btn-floating red">
<i class="large material-icons">share</i>
</a>
<!--End of share button-->
<ul>
<li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</li>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
Just add below css and you're done...
li.fixed-action-btn.horizontal.FAB2>ul {
opacity:0 !important;
transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
opacity:1 !important;
}
ElusiveCoder answer worked for me partially, like I was able to get his idea, but this worked for me at last:
HTML Code:
<div class="fixed-action-btn edit-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li class="fixed-action-btn-horizontal horizontal FAB2">
<!-- <a class="btn-floating"> -->
<!-- <div class="fixed-action-btn-horizontal"> -->
<a class="btn-floating blue"
><i
class="material-icons"
style="font-size: 30px"
id="pencilLarge"
>lens</i
></a
>
<ul class="bttom0px">
<li class="FAB2-li">
<a class="btn-floating green"
><i
class="material-icons"
style="font-size: 25px"
id="pencilMedium"
>lens</i
></a
>
</li>
<li class="FAB2-li">
<a class="btn-floating pink"
><i
class="material-icons"
style="font-size: 15px"
id="pencilSmall"
>lens</i
></a
>
</li>
<li class="FAB2-li">
<a class="btn-floating red"
><i
class="material-icons"
style="font-size: 10px"
id="pencilTiny"
>lens</i
></a
>
</li>
</ul>
<!-- </div> -->
<!-- </a> -->
</li>
</ul>
</div>
CSS Code:
li.fixed-action-btn-horizontal ul {
opacity:0 !important;
display: flex;
transition:0.2s all;
}
li.fixed-action-btn-horizontal:hover ul {
opacity:1 !important;
}
li.fixed-action-btn-horizontal:hover .btn-floating {
opacity:1 !important;
}
li.fixed-action-btn-horizontal .btn-floating {
opacity:1 !important;
transform: scale(1) translateY(0px) translateX(0px) !important;
}
.bttom0px{
bottom:0!important;
right:0!important;
left:90px!important;
}
JavaScript Code:
var elems = document.querySelectorAll(".fixed-action-btn");
var elems2 = document.querySelectorAll(".fixed-action-btn-horizontal");
var instances = M.FloatingActionButton.init(elems, {
// toolbarEnabled : true,
hoverEnabled: false,
});
var instances2 = M.FloatingActionButton.init(elems2, {
direction:'right',
});