Smart Social Nav for WordPress with Sass

Developer
Nerijus
Size
3,445 Kb
Views
20,240
  1. Smart Social Nav for WordPress with Sass Previews
  2. Smart Social Nav for WordPress with Sass HTML Codes
  3. Smart Social Nav for WordPress with Sass CSS Codes

How do I make an smart social nav for wordpress with sass?

Dynamic social sharing buttons made with sass. Easy to integrate to wordpress, very extendible and ux friendly. Clean and minimalistic . What is a smart social nav for wordpress with sass? How do you make a smart social nav for wordpress with sass? This script and codes were developed by Nerijus on 15 September 2022, Thursday.

Smart Social Nav for WordPress with Sass Previews
IQ Test

Smart Social Nav for WordPress with Sass - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smart Social Nav for WordPress with Sass</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title">Smart Social Nav for WordPress</h1>
<div class="subtitle"><a href="https://www.nerijusgood.com/coding/social-nav-menus-sass-font-awesome/">Full Tutorial</a> 2014</div>
<div class="social-menu">	<ul id="menu-social-links-1" class="social-menu-ul">	<li class="menu-item..."><a title="Facebook" href="https://www.facebook.com/"><span class="screen-reader-text">Facebook</span></a></li>	<li class="menu-item..."><a href="https://twitter.com/nerijusgood"><span class="screen-reader-text">Twitter</span></a></li>	<li class="menu-item..."><a href="https://plus.google.com/+NerijusGudas"><span class="screen-reader-text">Google +</span></a></li>	<li class="menu-item..."><a href="https://www.linkedin.com/in/nerijusgudas"><span class="screen-reader-text">LinkedIn</span></a></li>	<li class="menu-item..."><a href="http://stackexchange.com/users/4258802/nerijusgood"><span class="screen-reader-text">Stack Exchange</span></a></li>	</ul>
</div>
</body>
</html>

Smart Social Nav for WordPress with Sass - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
/* The variables containing information, just add repectively */
/* Styling */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900);
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden;
}
.social-menu { margin: 60px auto; display: table;
}
.social-menu .social-menu-ul { margin: 0; padding: 0;
}
.social-menu .social-menu-ul li { display: inline-block; /* the Loop */
}
.social-menu .social-menu-ul li a { margin: 0.4em 0; font-size: 18px; background: grey; padding: 0.7em; color: white; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.social-menu .social-menu-ul li a:before { font-style: normal; display: inline-block; font-family: "Fontawesome"; -webkit-font-smoothing: antialiased; line-height: 1em; text-align: center; width: 24px; vertical-align: baseline; content: "";
}
.social-menu .social-menu-ul li a[href*='twitter.com']::before { content: "";
}
.social-menu .social-menu-ul li a[href*='twitter.com'] { background-color: #00aced;
}
.social-menu .social-menu-ul li a[href*='twitter.com']:hover { background-color: #08bbff;
}
.social-menu .social-menu-ul li a[href*='facebook.com']::before { content: "";
}
.social-menu .social-menu-ul li a[href*='facebook.com'] { background-color: #3b5998;
}
.social-menu .social-menu-ul li a[href*='facebook.com']:hover { background-color: #4264aa;
}
.social-menu .social-menu-ul li a[href*='plus.google.com']::before { content: "";
}
.social-menu .social-menu-ul li a[href*='plus.google.com'] { background-color: #dd4b39;
}
.social-menu .social-menu-ul li a[href*='plus.google.com']:hover { background-color: #e15f4f;
}
.social-menu .social-menu-ul li a[href*='linkedin']::before { content: "";
}
.social-menu .social-menu-ul li a[href*='linkedin'] { background-color: #007bb6;
}
.social-menu .social-menu-ul li a[href*='linkedin']:hover { background-color: #008cd0;
}
/* Useless */
.title { text-align: center; font-family: "Raleway", sans-serif; font-size: 3em; margin: 60px 0 0; display: block;
}
.subtitle { text-align: center; font-family: "Raleway", sans-serif; font-size: 0.8em; margin: 0; display: block; text-transform: uppercase;
}
body { background-color: #ae;
}
Smart Social Nav for WordPress with Sass - Script Codes
Smart Social Nav for WordPress with Sass - Script Codes
Home Page Home
Developer Nerijus
Username nerijusgood
Uploaded September 15, 2022
Rating 3
Size 3,445 Kb
Views 20,240
Do you need developer help for Smart Social Nav for WordPress with Sass?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nerijus (nerijusgood) Script Codes
Name
Minimal Animated Header
From side hover effect
Multi-level mobile navigation
Vivus animate logo
A Pen by Nerijus
Inbox by gmail pure css logo
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!