i don't understand hover really well, can someone tell me how to hover this footer properly? i want the text to glow with hover but instead the hover is glowing not only the text. there's also a problem with some logo's for the facebook etc. this is the code i tried. also can someone drop a link for the logo's? i think i lost the link n that's why the logo's wont appear.
body {
margin: 0;
overflow-x: hidden;
}
.footer {
background: #000;
padding: 30px 0px;
font-family: 'Play', sans-serif;
text-align: center;
}
.footer .row {
width: 100%;
margin: 1% 0%;
padding: 0.6% 0%;
color: gray;
font-size: 0.8em;
}
.footer .row a {
text-decoration: none;
color: gray;
transition: 0.5s;
}
.footer .row a:hover {
color: #fff;
}
.footer .row ul {
width: 100%;
}
.footer .row ul li {
display: inline-block;
margin: 0px 30px;
}
.footer .row a i {
font-size: 2em;
margin: 0% 1%;
}
#media (max-width:720px) {
.footer {
text-align: left;
padding: 5%;
}
.footer .row ul li {
display: block;
margin: 10px 0px;
text-align: left;
}
.footer .row a i {
margin: 0% 3%;
}
}
<footer>
<div class="footer">
<div class="row">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-twitter"></i>
</div>
<div class="row">
<ul>
<li>Contact us</li>
<li>Our Services</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
<li>Career</li>
</ul>
</div>
<div class="row">
Company name || lorem
</div>
</div>
</footer>
I think you could use text-shadow.
That's how I did it to glow green-ish :
text-shadow: 0 0 7px rgb(190 254 194), 0 0 122px rgb(173 236 175);
You can just add it to the hover pseudoclass
Hope it's help!
You might be missing the dependency required for the visibility of your logo. As your code seems to be using "Font awesome" kindly use its CDN or install it in your project then it will work fine.
Link to font awesome - https://fontawesome.com/v4/get-started/
And changing color when we are hovering text seems to be fine with your code snippet.
Related
Hello so recently I've been building my personal website and been having troubles with my mobile view of my website.
The Problem : On a mobile device there is Unwanted White Space On Top Of Page (In nav Area). It basically covers the navbar.
Solutions : I've tried manipulating code, and seeing what could be causing this but no solution. Also used DevTools on google and it seems as if it won't show the top white space but only on the phone?
Nav HTML Code :
<!-- NAVIGATION -->
<nav>
<div class="logo"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></div>
<div class="openMenu"><i class="fa fa-bars" style="color:black;"></i></div>
<ul class="mainMenu">
<!-- Center-aligned links -->
<div class="nav-center">
<div class="navLogo"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></div>
</div>
<!-- Left-aligned links -->
<li>Contact</li>
<li>About</li>
<li>Store</li>
<div class="closeMenu"><i class="fa fa-times"></i></div>
<!-- Right-aligned links -->
<div class="nav-right">
<span class="icons">
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-discord"></i>
</span>
</div>
</ul>
</nav>
Nav CSS Code :
/* Nav BAR */
nav {
position: relative;
background: rgb(255, 255, 255);
color: #fff;
display: flex;
justify-content: space-between;
height:fit-content;
overflow: hidden;
width:100%;
}
/* Nav Main Menu */
nav .mainMenu {
display:flex;
list-style: none;
}
/* Centered section inside the top navigation */
.nav-center{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Right-aligned section inside the top navigation */
.nav-right {
position:absolute;
float: right;
right:-100px;
top:50%;
transform: translate(-50%, -50%);
}
nav .mainMenu li a {
display: inline-block;
padding: 30px;
margin:10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5rem;
font-family:'Courier New', Courier, monospace;
}
nav .mainMenu li a:hover {
color: rgb(0, 110, 255);
}
nav .openMenu {
font-size: 2rem;
margin: 20px;
display: none;
cursor: pointer;
}
nav .mainMenu .closeMenu , .icons i {
font-size: 2rem;
display: none;
cursor: pointer;
}
nav .logo {
margin: 6px;
font-size: 25px;
cursor: pointer;
display:none;
}
.icons i {
display: inline-block;
padding: 12px;
color:black;
}
Website - https://github.com/ConstantineLinardakis/TwinPlayzOfficial https://constantinelinardakis.github.io/TwinPlayzOfficial/index.html
Any idea why this is happening? Could It be because of the Nav?
I don't think it has to do with your body margin because the margin is set to 0 when I am inspecting your website. With that being said, perhaps your problem is due to using height: fit-content; I would suggest using a fixed height.
nav {
position: relative;
background: rgb(255, 255, 255);
color: #fff;
display: flex;
justify-content: space-between;
height: 33.5vh; /* Change applied */
overflow: hidden;
width: 100%;
}
The brower's style sheet setting a margin to your <body> element by default is the culprit.
CSS fix removing browser styles default <body> margin (e.g.: 8px in Firefox):
body {
margin: 0;
}
When I zoom in my page, all the elements go to left side, they are not collapsed but i want the web page to be on center when I zoom. I have made a container class and added a margin:auto to it bu it does not change anymore. Hope somebody answer it exactly.
#font-face {
font-family: irsans;
src:url('../fonts/irsans.woff2');
}
body{
margin:0;
}
.container{
margin:0 auto;
max-width:100%; /* requierd width */
background:red;
}
header {
width: 100%;
margin: auto;
height: 150px;
background-color: #FCFCFC;
}
.topnav{
position: absolute;
left: 334px;
top: 2px;
width: 552px;
height: 18px;
display: inline-block;
}
.topnav_items a{
margin: 2px;
font-size: 11px;
font-family: irsans;
color: #333;
float: left;
list-style: none;
padding: 0 5px;
}
.topnav_items li a:hover, .topnav_items li a:active {
text-decoration: none;
color: #8B9498;
}
<div class="container">
<header>
<div class="topnav">
<ul class="topnav_items">
<li class="fa fa-envelope-o" style="font-size:11px;">ارتباط با برنامه</li>
<li class="fa fa-bar-chart" style="font-size:11px;">پیش بینی مسابقات</li>
<li class="fa fa-desktop" style="font-size:11px;">تبلیغات</li>
<li class="fa fa-download" style="font-size:11px;">نرم افزار مسابقات پیامکی 90</li>
</ul>
</div>
</header>
</div>
Put your container(better call it wrapper) insidw the header.
Give the Container a fixed with using the with of ur topnav.
put margin to margin: 0 auto;
tkae out all atribute related to position: absolut from ur topnav.
(If ur not happ with the result u can also try to give container a relative with. For example with: 50% margin: 0 25%;)
<header>
<div class="container">
<div class="topnav">
<ul class="topnav_items">
<li class="fa fa-envelope-o" style="font-size:11px;">ارتباط با برنامه</li>
<li class="fa fa-bar-chart" style="font-size:11px;">پیش بینی مسابقات</li>
<li class="fa fa-desktop" style="font-size:11px;">تبلیغات</li>
<li class="fa fa-download" style="font-size:11px;">نرم افزار مسابقات پیامکی 90</li>
</ul>
</div>
</div>
</header>
#font-face {
font-family: irsans;
src:url('../fonts/irsans.woff2');
}
body{
margin:0;
}
.container {
margin: 0 25%;
max-width: 552px;
}
header {
width: 100%;
margin: auto;
height: 150px;
background-color: #FCFCFC;
}
.topnav {
width: 100%;
height: 18px;
display: inline-block;
}
.topnav_items a{
margin: 2px;
font-size: 11px;
font-family: irsans;
color: #333;
float: left;
list-style: none;
padding: 0 5px;
}
.topnav_items li a:hover, .topnav_items li a:active {
text-decoration: none;
color: #8B9498;
}
I want to make a fixed navbar at the bottom of the viewport with two sections. On the left, links for the rest of the site, and on the right, links to outside sources. I want to have everything both horizontally and vertically centered and to be responsive. For every solution I've tried, the height, alignment or size of the navbar is slightly off.
If I set the content div to 90% and the navbar div to 10%, then it "works" and things are aligned correctly, but I want the navbar to be slightly thinner.
As you can see with the border I styled the nav div with, its basically floating, and I have no idea why.
I've seen some similar questions, but a lot of the answers seem to point to outdated solutions using floats, etc.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
}
.main-content {
height: 90%;
max-width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
height: 5%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
</body>
Here's a CodePen.
So I did a few things to your code:
Made your page element a flexbox too:
.page {
height: 100%;
display: flex;
flex-direction: column;
}
And removed the heights for the main-content and nav, and the max-width for the main-content(better to set it in pixels according to content rather than percentages I guess).
For making the navbar slightly thinner perhaps you can reduce the line-height for the nav-left or nav-right.
Also added flex: 0 0 auto so that the the nav doesn't shrink too much when the height of the viewport is small (because line-height of nav is in viewport pixels).
See demo below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
}
.main-content {
/*height: 90%;*/
/*max-width: 70%;*/
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
/*height: 10%;*/
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto; /* addded */
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
I have tried many solutions on SO and none of them seem to work. I have tried many different methods of getting navbar-right to work but to no avail.
"Login" should be on the right.
Here is my nav:
<div class="navbar-header">
<a href="#" class="logo">
<img alt="Brand" src="img/logo.png">
</a>
</div>
<ul class="nav navbar-nav main-nav">
<li>Coin Flip</li>
<li>Deposit</li>
<li>Support</li>
<li>FAQ</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-steam" aria-hidden="true"></i></li>
</ul>
<div class="right">
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
And the relevant css:
.navbar {
background-color: #0C1322;
box-shadow: none;
z-index: 1000;
border: 0;
height: 70px;
border-bottom: inset 1px #2F394E;
display: flex;
align-items: center;
padding-left: 25px;
}
.navbar a {
text-transform: uppercase;
font-weight: bold;
color: #BDC0C5 !important;
word-wrap: none;
font-style: italic;
font-size: 15px;
padding: 0 !important;
transition: 0.5s all;
align-self: center;
padding-right: 30px !important;
}
.navbar a .fa {
font-size: 20px;
}
.navbar a:hover {
color: #4c7ba3 !important;
text-decoration: none;
}
.right {
float: right;
}
.main-nav {
padding-left: 30px;
display: flex;
align-content: center;
justify-content: center;
}
I have tried multiple positions, displays, etc. I think the issue might be in the flex box? When I added a container around the uls, it pulled right but also broke my flex box centering.
Thanks!
JSFiddle: https://jsfiddle.net/ga3rcg0w/ (Make sure to expand the web view)
Try this : Using Inspect Element on your browser.
<ul class="nav navbar-nav navbar-right" style="float:right">
<li>Login</li>
</ul>
Lets try to make the .navbar position to relative, and some change and add code for right class.
And the code looks :
.navbar {
background-color: #0C1322;
box-shadow: none;
z-index: 1000;
border: 0;
height: 70px;
border-bottom: inset 1px #2F394E;
display: flex;
align-items: center;
padding-left: 25px;
position:relative; /* <-- Add This */
}
/* New Style */
.right {
position:absolute;
top:0;
right:0;
}
.right ul {
margin-right:10px;
}
It should work like what you expected :)
I was able to get it to work with this.
.right {
margin-left: auto;
margin-right: 25px;
}
Float does not work due to the flex box.
I got a template from themeforest. There are some boxes near the bottom of the website (the ones with delivery worldwide etc)
When I make it smaller they dissapear, does anybody know how I can make them stack under each other?
This is the template: http://pixelgeeklab.com/demo/wordpress/flatize/?page_id=579
It's about this part:
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<ul class="wp-ads">
<li><i class="fa fa-plane"></i><strong>Delivery worldwide</strong>See all conditions</li>
<li><i class="fa fa-refresh"></i><strong>30 days returns</strong>For a smooth shopping</li>
<li><i class="fa fa-phone"></i><strong>0123 456 789</strong>Contact Customer</li>
<li><i class="fa fa-lock"></i><strong>30 days returns</strong>For a smooth shopping</li>
<li><i class="fa fa-question-circle"></i><strong>Shopping Guide</strong>Contact Customer</li>
</ul>
</div>
</div>
The reason it dissapears is because it is inside <section class="section-element hidden-xs"> so it's display is none when your width < 767px.
You should remove the class hidden-xs.
And add this css code.
#media (max-width: 767px){
.wp-ads li {
background: #1abc9c;
color: white;
display: block;
float: none;
overflow: hidden;
padding: 20px 0 20px 25px;
width: 20%;
}
}
You may want to increase the width when your view is smaller.
For example:
#media (max-width: 767px){
.wp-ads li {
background: #1abc9c;
color: white;
display: block;
float: none;
overflow: hidden;
padding: 20px 0 20px 5%;
width: 90%;
}
}
Check out the css, if I understand you right, you simply want to disable the floating of the li elements and make them appear as a stack, right?
Have a look at template.css about line 1497:
.wp-ads li {
background: #1abc9c;
color: white;
display: inline-block;
float: left;
overflow: hidden;
padding: 20px 0 20px 25px;
width: 20%;
}
change it to
.wp-ads li {
background: #1abc9c;
color: white;
/* display: inline-block; */
/* float: left; */
overflow: hidden;
padding: 20px 0 20px 25px;
width: 20%;
}