I have two photos on a page that I've set so that they're lined up against one another. In order to make this web page easier to navigate through on a smartphone, I'd like to have the two photos line up one on top of another when the screen size shrinks.
If anyone knows how to make photos responsive so that they're lined up one on top of another and easier to view on small-screen devices, as well as to help space the images, I'd appreciate your advice.
![How I'd like my page to look on smaller devices][1]
My (revised) code is as follows:
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
</div>
<br><div class="image" style="margin: 10px; text-align: center;">
<div class="responsive-image-container">
<img src="photos/Home_Page/fuji.JPG" alt="Fuji" width="40%"> <img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji" width="40%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020年 | English</footer>
</div>
<style>
.searchbar{float: right;}
#media only screen and (max-width: 1050px){
.responsive-image-container{
display: flex;
flex-direction: column;
}
}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
[1]: https://i.stack.imgur.com/HkD6k.jpg
Images are an inline elements. It depends on how you want your layout to work, but you may not need to do anything, it may be as simple as using the proper image size and setting a max-size.
A very simple implementation of what you need:
.responsive-image-container {
text-align: center;
}
.responsive-image-container>img {
max-width: 100%;
margin: 8px;
}
<div class="responsive-image-container">
<img src="https://placeimg.com/300/200/any" alt="some image" />
<img src="https://placeimg.com/300/200/any" alt="some image" />
</div>
A simple way to have more control, for example to have the images fill the containing parent, can be achieved using flex.
.responsive-image-container {
display: flex;
flex-direction: column;
align-items: stretch;
}
#media only screen and (min-width: 960px) {
.responsive-image-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
<div class="responsive-image-container">
<img src="https://placeimg.com/300/200/any" alt="some image" />
<img src="https://placeimg.com/300/200/any" alt="some image" />
</div>
I am trying to mimic the hover transitions for buttons as found on this page.
I have the following so far:
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
input[type="submit"]:hover {
text-decoration: none;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
input[type="submit"]:hover {
border: 3px solid #000;
background-color: #000;
color: #fff336;
}
input[type="submit"]:hover:after {
height: 100%;
}
input[type="submit"]:after {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
The above button is the only button on my page and with the following above code, I'd expect it the black background to hover from bottom to top, but it's not - why?
Edit:
[Preview link to page][2]
You don't have to use pseudo-element with input tag (Can I use a :before or :after pseudo-element on an input field?). Consider adding pseudo element on a container. Also remove the background of your input. It need to be transparent so you can see the effect of pseudo-element behind.
Here is an example:
.actions {
display:inline-block;
position:relative;
}
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
padding:20px;
border:none;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover input[type="submit"] {
color: #fff336;
background:transparent;
}
.actions:before {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index:0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.actions:hover::before {
height:100%;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
input not support ::before ::after you can use
<Button>
than add ::before ::after .
LIke https://jsfiddle.net/ufL55gfw/1/
Try below
.slider-button {
margin-top: 70px;
}
#media (max-width: 1220px) {
.slider-button {
margin-top: 30px;
}
}
.slider-button .button {
text-align: left;
}
#media (max-width: 1220px) {
.slider-button .button {
text-align: center;
}
}
.slider-button .button {
text-align: left;
}
.button {
text-align: center;
}
.button a{text-decoration:none;}
.button__item {
font-family: "Raleway", sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.313rem;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
padding: 32.5px 65px;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.button__item:hover {
text-decoration: none;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.button__item:hover:after {
height: 100%;
}
.button__item:after {
content: "";
background: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="slider-button"><div class="button">DOWNLOAD NOW</div></div>
I want to make a header appear to have an animated underline when the parent element is hovered. Right now it is very close but I can't seem to position it correctly so that its width grows in both directions from its center, which is what I want it to do. Does someone know what I'm missing or need to add to my code to make this happen? The code below is what I think is relevant to fixing the situation. The entire project can be viewed via this CodePen as well. Thanks in advance! (The underlining is only applied to the first header when hovering).
HTML:
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline"></div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
<div class="image-block">
<h3>Swallow Tail</h3>
<img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY">
</div>
<div class="image-block">
<h3>Directional</h3>
<img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg">
</div>
</div>
CSS:
.image-block:hover > h3{
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 10px;
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
Edit:
I am trying to use the same ideas from someone else's Underlining Effect CodePen. The biggest difference is I don't want to have an <a> inside my header.
If you apply width: 100% to the .underline rule it begins the animation from the center.
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%; /**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
Adjusting the width of the line
To adjust the width of the line you can change the following:
.underline{
margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
width: 80%;
}
.image-block:hover .underline {
width: 80% /*<== Set to match the .underline width */
}
* {
box-sizing: border-box;
}
.row {
min-width: 100%;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.image-block {
position: relative;
width: 33.33%;
float: left;
margin-top: 0;
z-index: 5;
}
.image-block:hover {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.image-block h3 {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: white;
top: 40%;
width: 100%;
font-size: 48px;
letter-spacing: 5px;
margin: 0;
transition: all .3s ease-in-out;
}
.image-block:hover>h3 {
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%;
/**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
.flex-image {
width: 100%;
height: auto;
display: flex;
}
#media all and (max-width: 1200px) {
.image-block {
width: 33.33%%;
}
}
#media all and (max-width: 1660px) {
.navbar a {
padding: 14px 14%;
}
}
#media all and (max-width: 1035px) {
.navbar a {
padding: 14px 12%;
}
}
#media all and (max-width: 880px) {
#top-image {
margin-top: 150px;
}
.image-block {
width: 100%;
margin: 0;
}
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar a:hover {
transform: scale(1);
}
}
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline">
</div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
</div>
I made a mobile responsive hamburger menu to horizontal nav bar, but I'm having trouble making a hover style for the links on the horizontal nav bar that don't make them jump. If you look at my Codpen you'll see the general style I want on those links on hover, but I want that highlight to be larger around the wording. When I've tried to do this the links end up jumping on hover. The other thing is that I can't get the top highlight much bigger... it's like it's cut off with some other property. This is the first menu like this I've made (I'm fairly new) so I played around with a lot of different CSS properties and values to get things to look perfect upon first glance and I'm sure some CSS isn't right, I just don't know what or where. I pasted the code below with everything inline but definitely check out the codpen because that's more accurate to how it looks on my computer. Thanks for your help!
http://codepen.io/sshine2/pen/VbjGaE
EDIT: I edited the code in Codepen to show how the top of the highlight gets cut off and the link jumps when the highlight is the size I want it to be.
SECOND EDIT: Fixed the top being cut off myself. Changed where the entire menu was displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block!important;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: .4em;
padding-right: 0em;
padding-left: 0em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>
The jumping issue is because you add padding on hover which isn't there before.
Before your media queries define the padding ones:
.menu li {
border-bottom: 0;
border-top: 0;
padding: 1em;
}
Then remove the defined paddings for .menu li in your min 768px query.,
code pen
I am working on a responsive Nav menu for a website. I changed the header image into an image slider however now on the index.html page the nav menu is no longer aligned to the websites grid.
In the 'about', 'services' and contact pages the menu is positioned perfectly.
In the index.html page I have css code to position the navbar and logo position:absolute; but the rest of navs on the other page are position relative.
I want all the nav menus on each page to align the same so there is no obvious difference when the user changes pages. It may not be obvious on small screens but when you compare the index and about pages on a mobile device it is obvious the nav is not in the correct grid.
Can someone point me in the right direction?
Here is a link to the live site
http://shaneogrady.me/navtest/
HTML
<!DOCTYPE html>
<html>
<head>
<title> HELLO </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=""><script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
</head>
<body>
<div id="home" class="banner a-banner">
<div class="container" style=" position: relative; z-index: 5; top: 0%; left: 5%;">
<div class="head-logo">
<img src="images/logo.png" alt="" />
</div>
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1">
<li class="hvr-sweep-to-bottom">Contact<i><img src="images/nav-but5.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">Services<i><img src="images/nav-but3.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">About<i><img src="images/nav-but2.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom active">Home<i><img src="images/nav-but1.png" alt=""/></i></li>
<div class="clearfix"></div>
</ul>
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {});
});
</script>
</div>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Batman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Superman</h1>
<h3>Superman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Spiderman</h1>
<h3>Spiderman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="services.html" role="button">See More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
You might want to try rebuilding your css from scratch instruction by instruction and see what is changing something. If a change doesn't apply, try adding !important at the end (like so :{ width : 30% !important;}), sometimes Bootstrap is a bit possessive.
Maybe throwing a position : absolute ; right :0; top:0; in the .top-nav and building from there would help do the trick.
An element with position: absolute is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed)
position: absolute allows an element to be positioned with respect
to a containing block using left, right, top or bottom (the containing
block is the nearest ancestor node with a position of relative,
absolute or fixed).
To fix it just add left: 0 and right: 0 to .container this will make the div stretch to document width.
Here a minimal snippet example to illustrate (without using left, right):
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Now with left: 0, right: 0
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
left: 0;
right: 0;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Check this out to full information