I am in the process of creating a slide in/out side bar for my page but I cannot do so unless my wrapper DIV covers the whole length of the body's width and height, which it doesn't and I don't know why.
I'm not entirely sure what code to include so I've included some here which I think is. If you need to preview all the code, I have provided a Pastebin link below.
Image of Issue - http://i.imgur.com/wWNAeBP.png
See All Code Here If Needs Be:
HTML - http://pastebin.com/TQT6Xc4z
CSS - http://pastebin.com/mS5Gh56x
Thanks in advance.
HTML:
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" Book Search" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
Have really been stuck on this for a good while now while trying to create the opening and closing sidebar so will appreciate any help at all!
try to change your wrapper css to
#wrapper {
width: 100%;
height: auto;
overflow:auto;
margin:0 0 0 20%; /* ### */
}
Go through your containers and remove :
height: 100%; // this is scaling your containers to the window height leaving white space...
#containerthree {
width: 80%;
height: 100%; <-- here is the problem
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
padding: 0 0 2em 0;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
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>
I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<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="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.
I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.
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.
After posting before I'm running into more problems with making my header responsive. I want to make my header image (logo) re-size down correctly with the browser and look correct on mobile devices.
like this web page does when re-sized down: http://timeandspace.org/
here is the fiddle link: www.jsfiddle.net/0m4z6u25/
Any tips on how to get the nav bar to do the same as the website linked up above will be a huge help!
Thanks
Firstly update the version of the bootstrap.css, use the latest stable to date(v3.3.6).
CDN link
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css
Next, You need to make lot of changes to your navbar code. I have made the changes to resemble your requirements. Here
<!--HEADER-->
<div class="header">
<div id="header-container" class="container">
<div class="headerdiv">
<a href="" class="headerleft">
<img src="http://i.imgur.com/DotvQDw.jpg" class="img-fluid" alt="header SU">
</a>
</div>
</div>
</div>
<nav class="navbar navbar-default" id="nav-main">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" width="20" height="20" src="img/nav_logo.jpg">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Help</li>
<li>Events</li>
<li>Forums</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
and the CSS is
/* Stylesheet */
html,
body {
height:100%;
}
img {
max-width: 100%;
}
/* Salford SU Header */
.headerbox {
height: 200px;
width: 100%;
background-color:white;
}
#header-container{
padding-left: 140px;
padding-right: 140px;
}
.headerdiv {
height: 200px;
width:100%;
padding-top: 0px;
padding-bottom: 17px;
padding-left: 65px;
padding-right: 65px;
}
.headerleft {
height: 146px;
min-width:400px;
width: 50%;
float: left;
padding-right: 15px;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
}
.header-right {
width: 40%;
height: 146px;
float: right;
border-left: 2px solid #c5c6c8;
padding-left: 15px;
}
.headerright1
{
height: 40px;
width: 100%;
text-align: justify;
vertical-align: bottom;
padding-top: 7px;
}
.headerright1 > a {
width: 34px;
display: inline-block;
vertical-align: bottom;
zoom: 1;
}
/*
#cover {
background:#222 url('img/header.jpg') center center no-repeat;
background-size:cover;
color:white;
height: 24.5%;
text-align:center;
display:flex;
align-items:bottom;
}
*/
/*NAVIGATION CSS*/
#nav-main {
background: #ed1e24;
}
#nav-main li {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
color:white;
}
.section-content {
padding: 5rem 0;
}
#about {
background: url('img/working.jpg') center center no-repeat;
}
.about-text{
background: rgba(0,0,0,0.8);
color: white;
padding: 1.875rem;
}
#footer-main {
background: #f1163e;
color:white;
font-size: 0.8rem;
padding: 2.5rem 0;
}
#media (min-width: 158px) and (max-width: 600px) {
#header-container {
padding-left: 0%;
padding-right: 0%;
}
.headerleft {
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 100%;
min-height: 100%;
}
.headerleft > a {
max-width: 100%;
max-height: 100%;
background-position: center left;
background-size: contain;
background-repeat: no-repeat;
display: block;
min-width: 100%;
min-height: 100%;
}
}
The Fiddle
Using media queries, you will need to resize the header image based on the screen width. You can then control the size, keeping it in proportion, and then you can show a different layout logo when on mobile - for example putting 'student's union' under the circle. This will not make it too small, and look good on a mobile.
An example of a media query:
#media (min-width: 900px) {}
Bootstrap also has some responsive classes such as visible-xs hidden-xs which could help here.
I got this snippet http://unslider.com/. I did everything asked there to get it working. But somehow it doesn't seem to load the next image in the queue and in return gives a blank space... You can see it here. easycounseling.org/new.html .. Here's the code:
<script>
$(function() {
$('.ss-area').unslider();
});
</script>
<div class="ss-area clearfix">
<ul class="img-sli">
<li class="fimg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
<li class="simg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
</ul>
</div>
The plugin is based on jQuery library
So you need to include jQuery and the plugin script file to make it work. The order in which they are loaded is important
---> jQuery
---> unslider plugin
Put this in the section where you have included the other script files. You can always test this by inspecting the console in Developer tools of the browser. It clearly shows the error.
Hi check this my unslider.com help file:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
</ul>
</div>
←
→
</div>
</body>
</html>