Does anyone know why the icons are just aligning left? I've tried using flexboxes as well, but the icons are too far away from one another. I've also tried using inline-block as the display.
.social-media {
align-self: center !important;
}
.social-media ul {
display: flex;
align-self: center;
}
.social-media ul li {
list-style: none;
margin: 0 10px;
align-content: center !important;
}
.social-media ul li .fa {
color: #000000;
font-size: 25px;
line-height: 50px;
}
.social-menu ul li .fa:hover {
color: #ffffff;
}
.social-media ul li a {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
text-align: center;
box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}
<div class="social-media">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
I think this should work.
.social-media {
display:flex;
justify-content:center;
}
To position all the icons to the center you can use the below css
.social-media {
align-self: center !important;
width: fit-content;
display: block;
margin: auto;
}
Related
I've created a fixed side nav bar and header and i'd like to create a grid within the content section of the page, however, when i add in any main content, it pushes below the fixed side bar and does not show from just below the header.
I've been scrolling through stack and google to see if i can fix the issue, but none of though solutions has worked.
I've made a code pen for visuals and seeing the code:
https://codepen.io/nyxerian/pen/ZEBKMJg
As you'll see the h2 title should be in line with the Home button at the top of the screen.
What am I missing?
HTML
<!DOCTYPE html>
>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="basic.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
</head>
<body>
<!-- start: SIDEBAR NAV AND HEADER -->
<div class='fixed header'></div>
<div class='fixed side'>
<img class="smartlogo" src="PNG1.png" alt="smart">
<nav class="sidebar">
<div class="text"></div>
<br>
<ul>
<li class="active"><i class="fas fa-home" style="color:#2DAAD6;"></i> Home</li>
<li><i class="far fa-handshake fa-fw" style="color: #2DAAD6;"></i> Sell</li>
<li><i class="fas fa-chart-line" style="color: #2DAAD6;"></i> Dashboards</li>
<li><i class="fas fa-boxes" style="color: #2DAAD6;"></i> Inventory</li>
<li><i class="far fa-credit-card" style="color: #2DAAD6;"></i> Payments</li>
<li>
<i class="far fa-folder-open" style="color: #2DAAD6;"></i> Leads
<ul class="lead-show">
<li>Referrals</li>
<li></i>Management</li>
<li>Settings</li>
</ul>
</li>
<li><i class="fas fa-users" style="color: #2DAAD6;"></i> Teams</li>
<li><i class="far fa-clipboard" style="color: #2DAAD6;"></i> Reporting</li>
<li><i class="fas fa-tools" style="color: #2DAAD6;"></i> Settings</li>
</ul>
</nav>
</div>
<div class='scrollable'></div>
<script>
$('.lead-btn').click(function () {
$('nav ul .lead-show').toggleClass('show')
$('nav ul .first').toggleClass('rotate')
})
$('nav ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Nordstern', Helvetica;
}
.scrollable {
height: 2000px;
width: 500%;
margin: 0 auto;
}
.fixed {
position: fixed;
}
.header {
top: 0;
left: 0;
right: 0;
height: 100px;
background-image: linear-gradient(
to right,
#436c89,
#6ca1cd,
#60b9c0
) !important;
}
.smartlogo {
width: 140px;
height: 45px;
margin-left: 40px;
margin-top: 30px;
}
.side {
top: 0;
left: 0;
bottom: 0;
width: 240px;
background-color: #e7e6e6;
}
.sidebar {
height: 80%;
width: 240px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #e7e6e6;
margin-top: 85px;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: black;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
justify-content: left;
background: #e7e6e6;
letter-spacing: 1px;
}
nav ul {
background: #e7e6e6;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: black;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: black;
background: #e7e6e6;
border-left-color: #60b9c0;
}
nav ul li a:hover {
background: #ffffff;
}
nav ul ul {
position: static;
display: none;
}
nav ul .lead-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: Black;
background: #e7e6e6;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: black !important;
background: #ffffff !important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
i {
display: inline-block;
margin-right: 15px;
}
Hello I'm trying to add a nested nav in my main nav. The problem is the nested nav doesn't align properly under the main nav. Please see the screenshot. The nested nav doesn't align right under the main nav. The nested nav moved around 50% to the right. I'm using css flexbox to layout the nav.
body {
background-color: red; /* to see menu */
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-around;
height: 8rem;
width: 100%;
background-color: transparent;
transition: height 0.5s;
}
.heading a:link,
a:visited {
font-family: 'Alata', sans-serif;
font-size: 3rem;
text-transform: capitalize;
color: white;
cursor: pointer;
display: block;
position: relative;
transition: .3s ease;
}
.heading a:hover,
a:active {
transform: translate(.3rem, -.2rem);
color: white;
}
.navbar {
display: flex;
width: 45%;
justify-content: space-between;
list-style-type: none;
z-index: 1000;
position: relative;
}
.navbar li {
position: relative;
flex: 1 1 auto;
}
.nested {
display: flex;
flex-direction: column;
list-style-type: none;
position: absolute;
width: 100%;
}
.nested li {
width: 100%;
}
.navbar li a:link,
a:visited {
padding: 5px 0px;
cursor: pointer;
color: white;
display: block;
transition: .3s;
}
.navbar li a:hover,
a:active {
transform: scale(1.2);
color: white;
background: rgba(0, 0, 0, 0.082);
}
.toggler {
display: none;
}
<div class="nav-wrapper">
<h1 class="heading">HeaderName</h1>
<div class="toggler">
<i class="fas fa-bars"></i>
</div>
<ul class="navbar">
<li> Home
<ul class="nested">
<li>
<i class="fas fa-user-alt"></i> About Us
</li>
<li><i class="fas fa-concierge-bell"></i> Services</li>
</ul>
</li>
<li>
<i class="fas fa-user-alt"></i> About Us
</li>
<li><i class="fas fa-concierge-bell"></i> Services</li>
<li><i class="fas fa-briefcase"></i> Portfolio</li>
<li><i class="fa fa-share" aria-hidden="true"></i> Contact</li>
</ul>
</div>
Finally got the got the problem. there was padding on the nested nav. had to add padding:0 property to css. My suggestion is to add margin:0 and padding:0 to ul, li ,a property.
I'm building a navigation bar and the code if fine in the desktop mode.
When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
#media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><i class="far fa-star"></i> Rewards</li>
<li><i class="fas fa-user-friends"></i> Connect</li>
<li><i class="fas fa-video"></i> Watch</li>
<li>
<i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
I want to set height of navbar to auto so when someone resizes it height to increase or decrease depends on screen or browser resize but it doesn't work i meant when i resize the ul li a goes down of navbar
#navbar {
width:100%;
height:45px;
background: black;
box-shadow: 2px 5px rgb(252,227,0,.5);
text-align: center;
position: fixed;
top:0;
z-index: 100;
float:top;
}
#navbar ul li {
display: inline;
}
#navbar ul {
margin-top:7px;
display: inline-block;
color:rgb(252,227,0);
font-size:1.2rem;
right:0;
position: fixed;
}
#navbar ul li .a2,.a3,.a4 {
padding-left:105px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
<div id="navbar">
<ul>
<li><i class="fas fa-bars"></i>Menu</li>
<li><i class="fas fa-shopping-cart"></i>Merchandise</li>
<li><i class="fas fa-info-circle"></i>About band</li>
<li class="drop"><i class="fas fa-music"></i>Listen now...</li>
</ul>
</div>
Solution: -
If you want to set height of navbar auto...So you have to remove height and background from #navbar..
*#navbar {
height:45px;
background: black;
}*
- > Add Background and some padding on ul also set the width 100%.
#navbar ul{
background: black;
padding: 12px 10px;
width: 100%;
}
#navbar {
width: 100%;
min-height: 45px;
background: black;
box-shadow: 2px 5px rgb(252, 227, 0, .5);
text-align: center;
position: fixed;
top: 0;
z-index: 100;
}
#navbar ul li {
display: inline;
}
#navbar ul {
display: block;
margin-top: 7px;
margin-bottom: 7px;
color: rgb(252, 227, 0);
font-size: 1.2rem;
}
#navbar ul li .a2,
#navbar ul li .a3,
#navbar ul li .a4 {
display: inline-block;
padding-left: 105px;
cursor: pointer;
color: rgb(252, 227, 0);
font-size: 1.2rem;
text-decoration: none;
transition: .5s;
}
<div id="navbar">
<ul>
<li><i class="fas fa-bars"></i>Menu</li>
<li><i class="fas fa-shopping-cart"></i>Merchandise</li>
<li><i class="fas fa-info-circle"></i>About band</li>
<li class="drop"><i class="fas fa-music"></i>Listen now...</li>
</ul>
</div>
ul.ulDropMenu{
z-index: 2;
}
ul.ulDropMenu li{
list-style: none;
position: relative;
}
ul.ulDropMenu li ul li a:hover{
color: #ff003c;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
}
nav ul li ul{
visibility: hidden;
display: block;
}
ul.ulDropMenu li:hover ul{
max-height: 290px;
visibility: visible;
opacity: 1;
}
ul.ulDropMenu li ul li{
width: 135px;
}
ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
}
.navBar {
background-color: #2A2A2A;
min-width: 100%;
}
.wrapper {
max-width: 100%;
padding: 0 10px;
-webkit-box-shadow: 0px 2px 7px 3px #8C8C8C;
-moz-box-shadow: 0px 2px 7px 3px #8C8C8C;
box-shadow: 0px 2px 7px 3px #8C8C8C;
padding-top: 3px;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-top: 15px;
}
nav ul a {
color: #7f7f7f;
text-decoration: none;
transition: color .4s ease;
font-size: 18px;
}
nav ul li ul li a{
font-size: 15px;
}
nav ul a:hover {
color: #afafaf;
}
nav li {
display: inline-block;
}
nav #menu-toggle {
display: none;
}
nav .label-toggle {
display: none;
}
nav .wrapper {
align-items: center;
display: flex;
}
#media screen and (max-width: 992px) {
nav nav ul li ul li {
color: #7f7f7f;
padding-right: 20px;
}
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: all 1s ease;
width: 50%;
visibility: hidden;
}
nav li {
color: #53354A;
display: block;
font-size: 19px;
}
nav #menu-toggle:checked ~ ul {
opacity: 1;
height: 62vh;
visibility: visible;
}
nav .label-toggle {
background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
cursor: pointer;
display: block;
float: right;
height: 35px;
margin-top: 35px;
width: 35px;
}
nav .wrapper {
display: block;
}
}
<nav class="navBar">
<nav class="wrapper">
<img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt="">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul class="ulDropMenu">
<li>
Menu 1
</li>
<li>
<a href="#">Menu 2
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
</li>
<li>
<a href="#">Menu 3
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
<i class="fab fa-facebook-square"></i> Facebook
<i class="fab fa-twitter-square"></i> Twitter
<i class="fab fa-instagram"></i> Instagram
</li>
</ul>
</li>
</ul>
</nav>
</nav>
Click on "Run code snipped" and on "full page" to see the snipped, and resize the screen under 992px.
The problem begins when i resize the screen under 992px. The navbar get bigger on the bottom, and the dropmenu don't open, i thought that it maybe was by the fault of the display: block but i don't think it is. I made some tests here and i realized that this problem was caused by this line:
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: all 1s ease;
width: 50%;
visibility: hidden; //This line
}
But if i take out the visibility: hidden; my collapisable menu will not work.
How can i fix it?
You css is very messed up. You have unwanted space on navbar because ul.ulDropMenu is always visible and it has padding-top: 15px inherited from .nav ul and margins inherited from default browser settings.
I suggest you read first about resets
/* basic reset for all elements */
* {
margin: 0;
padding: 0;
border: 0;
}
ul.ulDropMenu{
z-index: 2;
padding: 0; /* override padding set by '.nav ul' */
}
ul.ulDropMenu li{
list-style: none;
position: relative;
}
ul.ulDropMenu li ul li a:hover{
color: #ff003c;
}
ul.ulDropMenu li a{
display: block;
padding: 9px 14px;
}
ul.ulDropMenu li ul{
position: absolute;
background-color: #fff;
border-radius: 4px;
padding: 8px;
height: auto; /* override height set in '.nav ul' */
}
nav ul li ul{
visibility: hidden;
display: block;
}
ul.ulDropMenu li:hover ul{
max-height: 290px;
visibility: visible;
opacity: 1;
z-index: 1;
}
ul.ulDropMenu li ul li{
width: 135px;
}
ul.ulDropMenu li ul li a{
padding: 6px 14px;
color: #2A2A2A;
}
.navBar {
background-color: #2A2A2A;
min-width: 100%;
}
.wrapper {
max-width: 100%;
padding: 0 10px;
-webkit-box-shadow: 0px 2px 7px 3px #8C8C8C;
-moz-box-shadow: 0px 2px 7px 3px #8C8C8C;
box-shadow: 0px 2px 7px 3px #8C8C8C;
padding-top: 3px;
}
nav ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding-top: 15px;
}
nav ul a {
color: #7f7f7f;
text-decoration: none;
transition: color .4s ease;
font-size: 18px;
}
nav ul li ul li a{
font-size: 15px;
}
nav ul a:hover {
color: #afafaf;
}
nav li {
display: inline-block;
}
nav #menu-toggle {
display: none;
}
nav .label-toggle {
display: none;
}
nav .wrapper {
align-items: center;
display: flex;
}
#media screen and (max-width: 992px) {
nav nav ul li ul li {
color: #7f7f7f;
padding-right: 20px;
}
nav ul {
display: block;
height: 0;
list-style-type: none;
opacity: 0;
text-align: left;
padding-left: 0;
transition: all 1s ease;
width: 50%;
visibility: hidden;
}
nav li {
color: #53354A;
display: block;
font-size: 19px;
}
nav #menu-toggle:checked ~ ul {
opacity: 1;
height: 62vh;
visibility: visible;
}
nav .label-toggle {
background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
cursor: pointer;
display: block;
float: right;
height: 35px;
margin-top: 35px;
width: 35px;
}
nav .wrapper {
display: block;
}
}
<nav class="navBar">
<nav class="wrapper">
<img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt="">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul class="ulDropMenu">
<li>
Menu 1
</li>
<li>
<a href="#">Menu 2
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
</li>
<li>
<a href="#">Menu 3
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
<i class="fab fa-facebook-square"></i> Facebook
<i class="fab fa-twitter-square"></i> Twitter
<i class="fab fa-instagram"></i> Instagram
</li>
</ul>
</li>
</ul>
</nav>
</nav>