I'm trying to make a navigation for my portfolio and I can't get rid of that weird jump when I hover from one link to another. I know it's because of the bottom-border but i need that for design reasons.
I've been trying to find a solution forever and I can't find it anywhere. I've also tried outline instead of border bottom and ::after, and I've tried javascript/jquery.
.navi--link:link,
.navi--link:visited {
font-size: 7.2rem;
background: -webkit-linear-gradient(#d6d6d6, #5BC0EB);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
overflow: hidden; }
.navi {
position: relative; }
.navi__center {
position: absolute;
right: 2rem;
top: 2rem;
transition: all 2s;
display: block; }
.topDiv .navi--link {
z-index: 1;
position: relative;
font-size: 4rem;
letter-spacing: 6px;
display: block; }
.topDiv {
height: 2.25rem;
width: 100%;
overflow: hidden;
display: block;
border-bottom: 1px solid #d6d6d6; }
.topDiv:hover,
.topDiv:active {
height: 100%;
width: 100%;
overflow: hidden;
backface-visibility: hidden; }
<nav class="navi clearfix">
<ul class="navi__center">
<div class="topDiv">
<li><a class="navi--link" href="index.html">Home</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="about.html">About</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="skills.html">Skills</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="resources.html">Resources</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="portfolio.html">Portfolio</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="#">Contact</a></li>
</div>
</ul>
</nav>
I'm not getting any errors I'm just getting a weird jump when I move from one link to another, and I know it's from the border.
Related
How can I make half of the screen partially black when I click on button, like on the picture :
I made mobile navigation like that and specified that background color should be white:
.nav-links-row-mobile{
display: none;
top:0;
position: absolute;
left:0;
list-style: none;
background-color: #ffffff;
margin: 0;
padding: 50px;
height: 100%;
}
<div class="nav-links ">
<ul class="nav-links-row-mobile">
<div class="nav-logo nav-logo-mobile">
<a href="index.html">
<h1>Brit</h1><span class="grey">lex</span>
</a>
</div>
<li>Home</li>
<li>Skills</li>
<li>About Us</li>
<li>Pricing</li>
<li>Contacts</li>
</ul>
</div>
But how can I make 2nd half of the screen half black or partially visible?
Thank you in advance!
Try giving it a box-shadow with a zero blur, a very large spread and use rgba() to make the shadow color transparent.
body {
width: 100%;
height: 100%;
background: url(https://www.fillmurray.com/800/600) no-repeat center center fixed;
background-size: cover;
}
.nav-links-row-mobile{
top:0;
position: absolute;
left:0;
list-style: none;
background: #ffffff;
margin: 0;
padding: 50px;
height: 100%;
box-shadow: 0 0 0px 5000px rgba(0,0,0,0.5);
}
<body>
<div class="nav-links">
<ul class="nav-links-row-mobile">
<div class="nav-logo nav-logo-mobile">
<a href="index.html">
<h1>Brit</h1><span class="grey">lex</span>
</a>
</div>
<li>Home</li>
<li>Skills</li>
<li>About Us</li>
<li>Pricing</li>
<li>Contacts</li>
</ul>
</div>
</body>
would someone mind looking at a website please? The address is test.dvps.uk/index.html
I'm having issues with the Hamburger Menu, its in a 50% column and I want it right aligned. I've tried align content, floating and different position and displays but can seem to get it right. The other problem i'm having is that when the menu is toggled, it expands but pushes the content down of the container below but I want it to move the container too.
I'm sure that my tinkering to align the menu has caused this issue, so before I break it any further would you mind helping, please? Thank you :)
$(document).ready(function() {
$(".hamburger").click(function() {
$(".nav").slideToggle("slow");
});
});
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
border: none;
}
html {
box-sizing: border-box;
}
body {
font-family: "Arial";
font-size: 1.2em;
}
.container {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
}
.container-bottom-pad {
margin: 0 auto;
padding-top: 10px;
max-width: 1000px;
padding-bottom: 80px;
}
.outerContainer {
background-color: #F1F1F1;
}
.row::before,
.row::after {
display: table;
content: " ";
clear: both;
}
.row {
padding: 10px 0;
}
.one,
.one-third,
.two-thirds,
.one-fourth {
width: 100%;
}
#headerAndNav {
background-color: rgba(135, 196, 66, 0.60);
margin-bottom: 10px;
}
header img {
z-index: -2;
position: absolute;
width: 20%;
margin: 0 auto;
}
.header-logo {
position: relative;
height: 100px;
width: auto;
}
.nav {
display: none;
padding: 0;
overflow: hidden;
/* Makes the sliding animation cleaner */
}
.nav-item {
list-style-type: none;
text-align: center;
background: #87c442;
display: block;
margin: 12px 0;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 6px #2c3e50;
}
.nav-link {
text-decoration: none;
color: #333;
}
.nav-item:active {
box-shadow: none;
transform: translate(0px, 6px);
transition: transform .20s;
}
.hamburger span {
display: block;
width: 35px;
height: 4px;
background: #625948;
margin: 5px 0px;
padding: 0;
}
.hamburger:hover span {
transition: background ease-in-out .25s;
background: #87c442;
}
.hamburger:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="headerAndNav">
<div class="row">
<header>
<div class="eleven-twelths column">
<nav>
<span class="flex-container">
<div class="align">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="successes.html">Successes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prices.html">Prices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</span>
</nav>
</div>
<div class="one-twelth column">
<img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
</div>
<!-- end of one-twelth-->
</div>
<!-- end of row -->
</header>
</div>
<!-- end of container -->
Well, if you want a brute force solution, just do this in the CSS file:
.hamburger { position:fixed; top: 25px; right: 30px; }
This will take the hamburger div out from the document flow and it will always stick to the given position.
I see a couple other issues arising on the horizon, but keep going.
And take the whole align div out of the HTML.
After looking the adress you mention (test.dvps.uk/index.html) and following your questions:
1)" ... the Hamburger Menu, its in a 50% column and I want it right aligned ..."
The problems it's related to the div with class flex-container and the next div with class align (and note you have two definitions of class align: one floating right and the other floating left!)
2) ...pushes the content down of the container below but I want it to move the container too...
You can try with clear: right in the container after the menu.
Also you must note some properties in your file custom.css are misspelled (i.e bot instead bottom). Check it out this too.
I hope this help.
Saludos!
1) The alignment, as noted by others, is due to the flex container. Add:
justify-content: flex-end to right align.
2) The toggled menu pushing the content down is due to the DOM being changed (think of it as an element that goes from 0px width/height to 100px width/height). The easiest fix is to take the element out of the DOM flow. One way is using position. So, an example:
position: absolute; right: 0; z-index: 1 to ul.nav
Your hamburger should now be right aligned, and the hamburger content should not interfere/push down the other content.
I'm trying to align cards that are wrapped up in divs. What I want to do is align those cards beside each other until it reaches maximum screen width, then I want it to move to the next line automatically.
The problem is that once I copy the html code, the new copied card spawns on top of the previous card rather than next to each other.
HTML:
<div class="fighter-card">
<div class="front active">
<div class="ranking-position">1</div>
<div class="more">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="fighter-picture">
<img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
</div>
<ul class="information">
<li>
<div class="information-left">Name:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Weight:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Belts:</div>
<div class="information-right">aa</div>
</li>
</ul>
</div>
<div class="back">
<div class="go-back">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<ul class="information">
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">None of your business</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">aa</div>
<div class="information-right">9<sup>o</sup></div>
</li>
</ul>
</div>
</div>
<div class="fighter-card">
//Next div with the same content for testing
</div>
CSS:
.fighter-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
min-height: 400px;
}
.fighter-card .front {
width: 100%;
height: 100%;
background: #171717;
padding: 30px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
float: left;
}
.ranking-position {
font-weight: bold;
width: 50%;
text-align: left;
float: left;
color: #fff;
font-size: 40px;
}
.more {
width: 50%;
text-align: right;
cursor: pointer;
float: right;
font-size: 24px;
color: #fff;
display: block;
}
.fighter-picture {
background-size: cover;
}
.information {
margin: 0;
padding: 0;
}
.information li {
padding: 10px 0;
border-bottom: 2px solid #fff;
display: flex;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.information li:last-child {
border-bottom: none;
}
.information li .information-left {
width: 50%;
}
.information li .information-right {
width: 50%;
text-align: right;
}
.fighter-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: rgba(0,0,0,0.7);
box-sizing: border-box;
transform-origin: left;
transition: .5s;
transform: translateX(100%) rotateY(90deg);
}
.fighter-card .back.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front {
transform: translateX(-100%) rotateY(90deg);
}
.go-back {
font-size: 24px;
color: #fff;
text-align: right;
}
.go-back .fa {
cursor: pointer;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.more').click(function () {
$('.back').addClass('active')
$('.front').removeClass('active')
});
$('.go-back').click(function () {
$('.back').removeClass('active')
$('.front').addClass('active')
});
});
I know it's a lot of code here entered. Just want to make sure that everything that could be related to this problem is included.
Thanks in advance.
If you use absolute positioning and specify the location, then you should do that for each card. If not, let the browser do the positioning by using display: inline-block or float: left (if there is other content on the line).
I've just added a background image to a div on my homepage which sits in between my header and footer, and it is causing my sticky footer to sit at the bottom of the window instead of below the background image - so the background image sticks out below the footer... How can I get my sticky footer to sit below the div with the background image?
This is my HTML:
<body>
<header style="position: static;">
<div class="wrapper">
<div class="search" style="float: left; width: 20%; position: absolute; left: 0;">
<input type="text" class="st-default-search-input" contenteditable="true" style="background-color: #fff; border: 1px solid #EEE1DC; color: #000; font-weight: 400; float: left;">
</div>
<div class="social" style="right: 0; position: absolute;">
<img src="images/insta-ico.png" />
<img src="images/fb-ico.png" />
<img src="images/email-ico.png"/>
</div>
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><img src="images/sh_logo3.png" /></div>
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT
<li>SIZING</li>
<li>VIDEO</li>
<li>PRESS</li>
<li>SOCIAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<div id="hero"></div>
<!--<div style="background-color: #FAEDE8; z-index: 0; position: inherit;">
<p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #000; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
</div>-->
<footer>
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
<li>CUSTOMER SERVICE</li>
<li>ORDERS</li>
<li>RETURN POLICY</li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
And my CSS:
body {
background-color: #FAEDE8;
font-family: 'Open Sans', sans-serif;
margin: 0 0 50px;
overflow: auto;
overflow-x: hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
height: 50px;
width: 100%;
background-color: #FAEDE8;
color: #000;
overflow: hidden;
}
#hero {
position: absolute;
min-height: 100%;
background-size: cover;
width: 100%;
background-repeat: no-repeat;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
overflow-y: auto;
}
And lastly the JavaScript
$(function() {
var images = ['hero1.jpg', 'hero2.jpg', 'hero3.jpg', 'hero4.jpg', 'hero5.jpg', 'hero6.jpg', 'hero7.jpg', 'hero8.jpg', 'hero9.jpg'];
$('#hero').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
});
Any thoughts as to what is causing the jump?
here is the page in question - http://japesfawcett.com/testsh/hometest.html
After looking at your code, (and as MinusFour) pointed out. You're issue is the min-width:100% on your #hero div.
Remove this and you will be back in business!
Min-height 100% means that the smallest that div could ever be is, well, 100% of the window. This was causing your footer to sit at the bottom of your window instead of the page.
Here is a JSFiddle showing you the change.
Solution 2:
Alright, try this out:
Here is your new HTML structure. I kept all of your original class names so you shouldn't have to rename everything...
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><img src="images/sh_logo3.png" /></div>
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT
<li>SIZING</li>
<li>VIDEO</li>
<li>PRESS</li>
<li>SOCIAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div id="hero"></div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
<li>CUSTOMER SERVICE</li>
<li>ORDERS</li>
<li>RETURN POLICY</li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
Here is the main part I added to your CSS, but I did create the JSFiddle with your entire main.css file, so it should just be a copy/paste solution. Apologies for the CSS being a little messy in the fiddle.
* {
margin: 0;
}
html, body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
position: absolute;
z-index: -94;
display: block;
top: 0;
height: 100%;
width: 100%;
}
.footer, .push {
height: 4em;
z-index:12;
position:absolute;
}
.footer, .push {
clear: both;
}
Here is the Full Screen JSFiddle
Here is the Code View JSFiddle
Hopefully this solves your problem! Let me know!
*You may need to mess with some z-index on your header, but that's a small change.
There may be already a jQuery plugin which can achieve this, but I can't find one to do exactly what I'm after. If there is, just point me to the tutorial, thanks.
My problem I have is that I have very long page content, and my sidebar is not visible when you are scrolled near the bottom of the page.
So I would like to make my #sidebar div to stick to the top and bottom of my browser window as you scroll up and down the page.
My sidebar height is longer than your typical screen resolution, so I need the bottom of sidebar to sticky to the bottom of the browser window as well as the top of the browser.
So as you begin to scroll down, the side bar will scroll like normal, but when you reach the end the sidebar, it sticks and will not scroll, and as you begin to scroll up, the sidebar will follow until the top of sidebar reaches the browser, then it sticks. Vice Versa.
Is this possible?
I have created a jsfiddle of simple design layout which is central. I have added a dotted border to the sidebar so you now where the sidebar should stick.
http://jsfiddle.net/motocomdigital/7ey9g/5/
Any advice, or you know a online tutorial or demo, would most awesome!
UPDATE
Please see this attempt by #Darek Rossman
http://jsfiddle.net/dKDJz/4/
He's got the basic idea working. But the scrolling up, causes it to snap to the top. I need the sidebar to be fluid with the scrolling up/down motion. But sticking to the either the top or bottom of the window. It should also not be fixed positioned when the header/footer are in viewport, so it does not overlay.
Thanks
I have updated the jsfiddle with my solution.
var $sidebar = $("#sidebar"),
$window = $(window),
sidebartop = $("#sidebar").position().top;
$window.scroll(function() {
if ($window.height() > $sidebar.height()) {
$sidebar.removeClass('fixedBtm');
if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) {
$sidebar.addClass('fixedTop');
} else {
$sidebar.removeClass('fixedTop');
}
} else {
$sidebar.removeClass('fixedTop');
if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) {
$sidebar.addClass('fixedBtm');
}
if ($sidebar.offset().top < 0) {
$sidebar.removeClass('fixedBtm');
}
}
});
h1, h2 {
display: block;
font-weight: bold;
}
#horizon {
width: 100%;
height: 100%;
min-height: 100%;
background: #cccccc;
overflow: hidden;
}
#header, #footer {
width: 480px;
height: auto;
overflow: hidden;
background: teal;
padding: 10px;
color: #ffffff;
}
#wrapper {
width: 500px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: auto;
overflow: hidden:
}
#content {
width: 330px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
float: left;
padding: 10px;
}
#sidebar {
width: 130px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
float: left;
clear: right;
padding: 8px;
background: #e5e5e5;
border: 2px dashed red;
}
.fixedBtm {
margin-left: 350px !important;
position: fixed;
bottom: 0;
}
.fixedTop {
margin-left: 350px !important;
position: fixed;
top: 0;
}
.post {
margin: 5px;
width: 320px;
background: red;
float: none;
overflow: hidden;
min-height: 175px
}
.buttons li {
margin: 5px;
width: 120px;
background: blue;
float: none;
overflow: hidden;
min-height: 20px;
text-align: center;
color: #ffffff;
cursor: pointer;
}
.buttons li:hover {
background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="horizon">
<div id="wrapper">
<div id="header">header</div>
<div id="content-wrapper">
<div id="content">
<h1>Latest Posts</h1>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<ul class="buttons">
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
<li>Button 6</li>
<li>Button 7</li>
<li>Button 8</li>
<li>Button 9</li>
<li>Button 10</li>
<li>Button 11</li>
<li>Button 12</li>
<li>Button 13</li>
<li>Button 14</li>
<li>Button 15</li>
<li>Button 16</li>
<li>Button 17</li>
<li>Button 18</li>
</ul>
</div>
</div>
<div id="footer">footer</div>
</div>
</div>
The sidebar should remain in place at the top when the window is larger than the sidebar and fix to the bottom when the sidebar is larger.
You don't need any jQuery or javascript for this. All of this can be achieved in CSS with position: fixed.
Change your sidebar selector to the following
#sidebar {
width: 130px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
clear: right;
padding: 8px;
background: #e5e5e5;
border: 2px dashed red;
position: fixed;
right: 35px;
}