I have been trying to create a multi steps form, working on my css to achieve the result I want but I couldn't achieved the exact solution I wanted.
I was able to design its layout but the issue I am facing is the line I wanted through those links.
Below is what I am trying to achieve:
What I was able to come up with:
If you take a look at the top of the second image. you will see the grey line at the top of those links.
Html Markup
<ul id="owp-checkout-timeline" class="owp-woo-checkout-timeline clr square step-4">
<li id="timeline-0" data-step="0" class="timeline login active">
<div class="timeline-wrapper">
<span class="timeline-step">1.</span>
<span class="timeline-label">Login</span>
</div>
</li>
<li id="timeline-1" data-step="1" class="timeline billing ">
<div class="timeline-wrapper">
<span class="timeline-step">2.</span>
<span class="timeline-label">Billing</span>
</div>
</li>
<li id="timeline-2" data-step="2" class="timeline shipping" >
<div class="timeline-wrapper">
<span class="timeline-step">3.</span>
<span class="timeline-label">Shipping</span>
</div>
</li>
<li id="timeline-3" data-step="3" class="timeline payment">
<div class="timeline-wrapper">
<span class="timeline-step">4.</span>
<span class="timeline-label">Payment Info</span>
</div>
</li>
</ul>
Css code
.owp-woo-checkout-timeline{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
margin:0 0 1em;
padding:0;
font-size:90%;
text-transform:uppercase;
}
.owp-woo-checkout-timeline>li.timeline{
list-style:none;
text-align:center;
width:auto;
padding:0;
margin:0;
position:relative;
text-overflow:ellipsis;
color:#b71c1c;
display:block
}
.timeline-wrapper{
display: table-row;
}
.timeline-wrapper:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.owp-woo-checkout-timeline>li.timeline .timeline-step,.owp-woo-checkout-timeline>li.timeline .timeline-step:after,
.owp-woo-checkout-timeline>li.timeline .timeline-step:before{
background-color:#e65100;
color:#fff;
font-weight:bold;
border-color:#247830;
padding:6px;
border-radius:800px;
}
.owp-woo-checkout-timeline>li.timeline .timeline-step:before{left:0}
.owp-woo-checkout-timeline>li.timeline .timeline-step:after{right:0}
.owp-woo-checkout-timeline>li:first-child .timeline-step:after,
.owp-woo-checkout-timeline>li:first-child
.owp-woo-checkout-timeline{width:50%;margin-left:50%}
.owp-woo-checkout-timeline>li:last-child .timeline-step:after,
.owp-woo-checkout-timeline>li:last-child .timeline-step:before{width:50%;margin-right:50%}
.owp-woo-checkout-timeline>li.active,.progress-indicator>li.active .timeline-step{color:#337AB7}
.owp-woo-checkout-timeline>li.active .timeline-step,.progress-indicator>li.active .timeline-step:after,
.owp-woo-checkout-timeline>li.active .timeline-step:before{background-color:#337AB7;border-color:#122a3f}
.owp-woo-checkout-timeline>li a:hover .timeline-step,.progress-indicator>li a:hover .timeline-step:after,
.owp-woo-checkout-timeline>li a:hover .timeline-step:before{background-color:#5671d0;border-color:#1f306e}
.owp-woo-checkout-timeline>li a:hover .timeline-step{color:#5671d0}
Change this z-order: 0; css to z-index:-1; on .timeline-wrapper:before class.
Also change the top position of the line and add position:relative to main circle or font.
please try this code :
<!DOCTYPE html>
<html>
<head>
<title>Accordians</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.form_wizard .stepContainer {
display: block;
position: relative;
margin: 0;
padding: 0;
border: 0 solid #CCC;
overflow-x: hidden;
}
/**-------**/
.wizard_horizontal ul.wizard_steps {
display: table;
list-style: none;
position: relative;
width: 100%;
margin: 0 0 20px;
padding: 0;
}
.wizard_horizontal ul.wizard_steps li {
display: table-cell;
text-align: center;
}
.wizard_horizontal ul.wizard_steps li a, .wizard_horizontal ul.wizard_steps li:hover {
display: block;
position: relative;
-moz-opacity: 1;
filter: alpha(opacity: 100);
opacity: 1;
color: #666;
}
.wizard_horizontal ul.wizard_steps li a:before {
content: "";
position: absolute;
height: 8px;
background: #ccc;
top: 40px;
width: 100%;
z-index: 4;
left: 0;
}
.wizard_horizontal ul.wizard_steps li a.disabled .step_no {
background: #ccc;
}
.wizard_horizontal ul.wizard_steps li a .step_no {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 100px;
display: block;
margin: 0 auto 5px;
font-size: 16px;
text-align: center;
position: relative;
z-index: 5;
}
.wizard_horizontal ul.wizard_steps li a.selected:before, .step_no {
background: #34495E;
color: #fff;
}
.wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .step_no {
background: #1ABB9C;
color: #fff;
}
.wizard_horizontal ul.wizard_steps li:first-child a:before {
left: 50%;
}
.wizard_horizontal ul.wizard_steps li:last-child a:before {
right: 50%;
width: 50%;
left: auto;
}
/**-------**/
.wizard_verticle .stepContainer {
width: 80%;
float: left;
padding: 0 10px;
}
.form_wizard .stepContainer div.content {
display: block;
position: absolute;
float: left;
margin: 0;
padding: 5px;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color: #5A5655;
height: 300px !important;
text-align: left;
overflow: auto;
z-index: 88;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
clear: both;
}
.actionBar {
width: 100%;
border-top: 1px solid #ddd;
padding: 10px 5px;
text-align: right;
margin-top: 10px;
}
.actionBar .buttonDisabled {
cursor: not-allowed;
pointer-events: none;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
.actionBar a {
margin: 0 3px;
}
/**-------**/
</style>
</script>
</head>
<body>
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps anchor">
<li>
<a href="#step-1" class="selected" isdone="1" rel="1">
<span class="step_no">1</span>
<span class="step_descr">
<small>Login</small>
</span>
</a>
</li>
<li>
<a href="#step-2" class="done" isdone="1" rel="2">
<span class="step_no">2</span>
<span class="step_descr">
<small>Billing</small>
</span>
</a>
</li>
<li>
<a href="#step-3" class="done" isdone="1" rel="3">
<span class="step_no">3</span>
<span class="step_descr">
<small>Shipping</small>
</span>
</a>
</li>
<li>
<a href="#step-4" class="done" isdone="1" rel="4">
<span class="step_no">4</span>
<span class="step_descr">
<small>Payment Info</small>
</span>
</a>
</li>
</ul>
<div class="stepContainer">
<div id="step-1" class="wizard_content" style="display: block;">
</div>
<div id="step-2" class="wizard_content" style="display: none;">
</div>
<div id="step-3" class="wizard_content" style="display: none;">
</div>
<div id="step-4" class="wizard_content" style="display: none;">
</div>
</div>
<!-- <div class="actionBar">
Finish
Next
Previous
</div> -->
</div>
<!-- form wizard -->
<script type="text/javascript" src="http://xn--80akiaokt3b4b.xn--d1acnqm.xn--j1amh/templates/demo/gentelella/js/wizard/jquery.smartWizard.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Smart Wizard
$('#wizard').smartWizard();
function onFinishCallback() {
$('#wizard').smartWizard('showMessage', 'Finish Clicked');
//alert('Finish Clicked');
}
});
$(document).ready(function() {
// Smart Wizard
$('#wizard_verticle').smartWizard({
transitionEffect: 'slide'
});
});
</script>
</body>
</html>
Related
I'm a complete beginner and I'm trying to make a navigation bar.
I'm trying to make a navigation bar that works and looks like this one from this webpage (different colors):
https://www.swiss.com/ch/EN/prepare/check-in
I've come so far:
I want each column in .dropdown-content to be the same width as the ones in .column
That means the orange column "hello world1" to be the same width as "Category 1" and so forth.
And I also want both columns that are underneath each other to be connected as in the link above. Whenever I hover over the .dropdown-content, I want the background-color of .column to change as well.
Here is my snippet:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color: #fc7b03;
background-color: #B5B5B5;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fc7b03;
width: 100%;
left: 0;
box-shadow: 0px 3px 26px 0px #fc7b03;
z-index: 1;
opacity: 95%;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #B5B5B5;
height: 250px;
opacity: 100%;
}
.header2 {
float: left;
width: 33.33%;
padding: 1px;
background-color: #fc7b03;
height: 150px;
opacity: 100%;
font-size: 12px;
}
.header22 {
float: left;
position: relative;
width: 95%;
margin-left: 2.5%;
padding: 1px;
background-color: #fc7b03;
opacity: 100%;
font-size: 12px;
}
.header2:hover {
background-color: #B5B5B5;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
color: #fc7b03;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
.row2::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<link href="/resources/header/header.css" type="text/css" rel="stylesheet">
<body>
<!-- this is the dropdown navigation panel -->
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row2">
<a href="http://google.com">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<br>
<span style="display: block" class="header22">
Hello world1
</span>
</a>
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world2
</span>
</a>
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world3
</span>
</a>
-->
<!--
<a href="#">
<div class="header2">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<h2>Mega Menu</h2>
</div>
</a>
<div class="header2">
<h2 >Mega Menu2</h2>
</div>
-->
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
<h3>balbllalba</h3>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
<p>Re</p>
</div>
<div style="padding:16px">
<h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
<p>Hover over the "Dropdown" link to see the mega menu. </p>
</div>
</body>
EDIT:
I've been able to get a bit further, however i still can't get "Hello world" and "Category 1" to act as one unit under "hover". Not a huge problem, but for now i'm satisfied with what i've got:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color: #fc7b03;
background-color: #B5B5B5;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fc7b03;
width: 100%;
left: 0;
box-shadow: 0px 3px 26px 0px #fc7b03;
z-index: 1;
opacity: 95%;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #B5B5B5;
height: 250px;
opacity: 100%;
}
.header22 {
float: left;
width: 33.33%;
padding: 1px;
background-color: #fc7b03;
height: 150px;
opacity: 100%;
font-size: 12px;
}
.header22s {
float: left;
position: relative;
width: 95%;
margin-left: 2.5%;
padding: 1px;
background-color: #fc7b03;
opacity: 100%;
font-size: 12px;
border: solid;
}
.header2:hover {
background-color: #B5B5B5;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
color: #fc7b03;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
.row2::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
.column:hover , .header22:hover{
animation-duration: 1.5s;
animation-name: border;
animation-iteration-count: infinite;
}
#keyframes border {
from {
border: solid white;
border-width: 2px;
}
to {
border: solid #D3CFCF;
border-width: 2px;
}
}
/* not used stuff
.column:hover {
background-color: #B5B5B5;
transition-property: border-color;
transition-duration: 1.5s;
border: solid #dbd8cf;
border-width: 2px;
}
*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row2">
<a href="http://google.com" class="header22" id="ga">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg"
style="width:50px; height:50% ">
<br>
<span style="display: block">
Hello world1
</span>
</a>
<a href="http://google.com" class="header22">
<span style="display: block">
Hello world2
</span>
</a>
<a href="http://google.com" class="header22">
<span style="display: block">
Hello world3
</span>
</a>
<!--
<a href="#">
<div class="header2">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<h2>Mega Menu</h2>
</div>
</a>
<div class="header2">
<h2 >Mega Menu2</h2>
</div>
-->
</div>
<div class="row">
<div class="column" id="ga">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Here you go!
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color: #fc7b03;
background-color: #B5B5B5;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fc7b03;
width: 100%;
left: 0;
box-shadow: 0px 3px 26px 0px #fc7b03;
z-index: 1;
opacity: 95%;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #B5B5B5;
height: 250px;
opacity: 100%;
}
.column-top {
float: left;
width: 33.33%;
padding: 10px;
opacity: 100%;
}
.header2 {
float: left;
width: 33.33%;
padding: 1px;
background-color: #fc7b03;
height: 150px;
opacity: 100%;
font-size: 12px;
}
.header22 {
float: left;
position: relative;
width:33.33%;
margin-left: 2.5%;
padding: 1px;
background-color: #fc7b03;
opacity: 100%;
font-size: 12px;
}
.header2:hover {
background-color: #B5B5B5;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
color: #fc7b03;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
.row2::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
.column-top {
width: 100%;
height: auto;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div class="column-top">
<img src="https://image.shutterstock.com/image-vector/real-estate-logo-260nw-1615688014.jpg" style="width:50px; height:50% ">
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world1
</span>
</a>
</div>
<div class="column-top">
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world2
</span>
</a>
</div>
<div class="column-top">
<a href="http://google.com">
<span style="display: block" class="header22">
Hello world3
</span>
</a>
</div>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
<h3>balbllalba</h3>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
<p>Re</p>
</div>
<div style="padding:16px">
<h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
<p>Hover over the "Dropdown" link to see the mega menu. </p>
</div>
here is a screenshot of my website i want to adjust the image to be on the right of the page as indicated by the arrow below(float:right; didn't work).Also, as for (float:left;) i want on the left side to add some text as shown in the image below at the left side.Lastly for the circled part on the photo it is not clickable for some reason :(((
i want the picture to stick to the right side of the page as the arrow showing below::
the css code ::
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
}
.hp_div{
background-color: pink;
}
.hp_div section#hpimg{
float: left;
}
.hp_div section#hptext{
float: right;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
.form-inline {
display: flex;
}
.homeage_but {
width: 100%;
height: auto;
}
.mark_colour{
background-color: pink;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
background-color: pink;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
.Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.centered-element{text-align:center;}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code::
<!DOCTYPE html>
<!--F04 :moudhi al.gowiez-->
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
<div class="icons">
<a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="hp_div">
<!-- Slide Show -->
<section id="#hpimg">
<img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
<img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
<section id="#hptext">
<h5>welocome</h5>
<p>fkld;flfk;sk</p>
</section>
</div>
</body>
</html>
Two things I notice right away:
<section id="#hpimg"> & <section id="#hptext">
You'll need to remove the '#' from these id declarations in order for your CSS to affect them.
And the reason your links aren't working:
<a herf="">...</a>
'herf' isn't the same as 'href'. Always check for typos ;)
EDIT: It seemed like one of your edits indicated you wanted the image moved to the left instead of the right. I've updated the little fiddle I made, basically just changing float:left to float:right.
Why don't you use bootstrap the col-md for the text and image
For example
<div class="container">
<div class="row">
<div class="col-md-7">
<p> Text </p>
</div>
<div class="5">
<img href="cake img">
</div>
</div>
</div>
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.
I am editing a template and I am having trouble getting the navigation menu button to align next to my logo when viewed on mobile devices. It also slightly covers the header image on mobile as well.
Mobile view
Desktop view
Any help is greatly appreciated! Here is my code:
#import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);
/*************************
*******Typography******
**************************/
body {
font-family: 'Dosis', sans-serif;
font-size: 17px;
color: #fff
}
.btn {
border-radius: 0;
font-family: 'Yanone Kaffeesatz','sans-serif';
font-size: 20px;
padding: 9px 23px;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
a:focus,
a:hover {
text-decoration: none;
outline: none
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
text-transform: uppercase;
}
h2 {
font-size: 36px
}
.navbar-toggle {
margin-top: 12px
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle,
.navbar-toggle:focus {
border:1px solid #fff;
outline: none;
}
/*************************
*******Header CSS******
**************************/
.header-top {
display: block;
overflow: hidden;
padding: 25px;
}
.main-nav {
position: absolute;
width: 100%;
z-index: 999;
}
.main-nav
.container {
width: 100%
}
.social-icons a {
font-size: 18px;
color: #fff;
padding-left:20px;
}
.social-icons .fa-facebook:hover {
color: #3B5997
}
.social-icons .fa-twitter:hover {
color:#29C5F6
}
.social-icons .fa-google-plus:hover {
color:#D13D2F
}
.social-icons .fa-youtube:hover{
color: #ec5538
}
.navbar-brand {
background-color: #ff0080;
height: 90px;
margin-bottom: 20px;
position: relative;
width: 435px;
}
.navbar-brand img {
position: absolute;
top: -35px;
}
.navbar-right {
background-color: #ff0080;
padding:0 95px 0 0;
opacity: .9
}
.navbar-right li a {
padding: 35px 21px;
font-size: 22px;
color: #fff;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
}
.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
background-color: #fff;
color: #16728f
}
.fixed-menu {
background-color: #ff0080;
position: fixed;
top: 0;
}
.fixed-menu .navbar-right {
padding: 0;
}
.fixed-menu .navbar-right li a {
font-size: 18px;
padding: 20px 25px;
text-shadow:inherit;
}
.fixed-menu .navbar-brand {
height: 60px;
margin-top: 0;
padding: 0;
margin-bottom: 0;
width: 435px;
}
.fixed-menu .navbar-brand img {
height:60px;
top: 0;
}
.fixed-menu .header-top {
display: none;
}
/*************************
*******Home CSS******
**************************/
#home {
position: relative;
overflow: hidden;
}
#main-slider img {
width: 100%
}
#main-slider
.carousel-caption {
background: none repeat scroll 0 0 #000000;
bottom: 14%;
float: left;
left: 0;
opacity: 0.8;
padding:10px 60px 35px;
right: inherit;
text-transform: uppercase;
color: #fff;
text-align: left;
}
#main-slider
.carousel-caption h2 {
font-size: 38px;
}
#main-slider
.carousel-caption h4 {
font-size: 24px;
}
#main-slider
.carousel-caption a {
font-size: 22px;
color: #2da1c5
}
#main-slider
.carousel-caption a:hover {
color: #2588a6
}
#main-slider
.carousel-caption a:hover i {
margin-left: 35px
}
#main-slider
.carousel-caption a i {
margin-left: 15px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#main-slider
.carousel-indicators li {
background-color:#ff0080;
border: 1px solid #ff0080;
}
#main-slider
.carousel-indicators li.active {
background-color:#fff;
border: 1px solid #fff;
}
/*************************
*******Explore CSS******
**************************/
#explore {
background-color: #C34C39;
background-image: url("../images/event-bg.jpg");
background-position: center bottom;
background-size: contain;
background-repeat:no-repeat;
position: relative;
overflow: hidden;
padding: 130px 0 100px;
}
.watch {
position: absolute;
left: 0;
top: 7%;
}
#explore h2 {
font-size: 42px;
text-transform: uppercase;
text-align: center;
}
#countdown {
display: block;
overflow: hidden;
text-align: center;
padding: 0
}
#countdown li {
list-style: none;
display:inline-block;
margin-right: 40px;
text-align: center;
text-transform: uppercase;
font-size: 18px;
position: relative;
}
#countdown li:last-child {
margin-right: 0
}
#countdown li span {
display: block;
font-size: 40px;
font-weight: 700;
height: 82px;
line-height: 79px;
width: 75px;
border-radius: 10px;
border-right: 1px solid #c34c39;
border-bottom: 1px solid #c34c39;
}
#countdown li .days {
background-color: #45b29d;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .hours {
background-color: #efc94c;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .minutes {
background-color: #e27a3f;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .seconds {
background-color: #df5a49;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li:before {
background-color: #c34c39;
content: "";
height: 11px;
left: 0;
position: absolute;
top: 36px;
width: 1px;
}
#countdown li:after {
background-color: #c34c39;
content: "";
height: 11px;
right:0;
position: absolute;
top: 36px;
width: 1px;
}
.cart {
background-color: #b34534;
position: absolute;
right:-200px;
top: 37%;
width:252px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.cart:hover {
right:0;
}
.cart a {
color: #FFFFFF;
display: block;
font-size: 24px;
text-transform: uppercase;
}
.cart a i {
font-size: 30px;
padding: 20px 12px;
background-color: #A64030;
margin-right: 3px;
}
/*************************
*******Event CSS******
**************************/
#event {
background-color: #33888F;
background-image: url("../images/performar-bg.jpg");
background-position: 50% 0;
background-size: contain;
position: relative;
background-repeat: no-repeat;
}
.guitar {
position: absolute;
right:0;
top: 0
}
#event h2 {
color: #FFFFFF;
font-size: 36px;
font-weight: 300;
margin-bottom: 40px;
margin-top: 70px;
text-transform: uppercase;
}
.single-event {
margin-bottom: 70px;
}
.single-event h4 {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
line-height: 26px;
margin-top: 25px;
text-transform: uppercase;
}
.single-event h5 {
font-size: 18px;
font-weight: 100;
display: block;
}
#event-carousel {
position: relative;
}
.even-control-left,
.even-control-right {
position: absolute;
font-size: 24px;
color: #fff;
top: 0;
}
.even-control-left {
right: 3%
}
.even-control-right {
right: 0;
}
/*************************
*******About CSS**********
**************************/
#about {
background-color: #75B46E;
position: relative;
width: 100%;
display: flex;
}
.guitar2 {
top: 0;
width: 50%;
}
.guitar2 img {
padding-top: 3%;
}
.about-content {
width: 50%;
background-image: url("../images/about-bg.jpg");
background-position: left bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 70px 110px;
}
#about h2 {
margin-bottom: 23px;
}
.about-content p {
font-size: 17px;
font-family: 'Dosis',sans-serif;
}
#about .btn-primary {
background-color: #137c61;
color: #fff;
text-transform: capitalize;
border: none;
margin-top: 28px;
}
#about .btn-primary:hover {
background-color: #126d55
}
/*************************
******Twitter CSS****
**************************/
#twitter {
background-color: #ecedef;
background-image: url("../images/twitter-bg.jpg");
background-position: center bottom;
background-size: cover;
background-repeat:no-repeat;
position: relative;
padding: 95px 0 90px;
overflow: hidden;
}
.twit {
position: absolute;
left: 0;
top:-42%;
}
#twitter-feed .item {
text-align: center;
}
#twitter-feed .item img {
display: inline-block;
width: 78px;
height: 78px;
border-radius: 50%;
background-color: #c5c8ce;
padding: 5px;
margin-bottom: 30px;
}
#twitter-feed .item a,
#twitter-feed .item p {
font-size: 24px;
font-weight: 300;
font-family: 'Yanone Kaffeesatz','sans-serif';
}
#twitter-feed .item p {
color: #3D3D3D;
}
#twitter-feed .item a {
color:#00c3ff;
}
.twitter-control-left,
.twitter-control-right {
position: absolute;
color: #00c3ff;
top: 59%;
font-size: 24px
}
.twitter-control-left {
left: 0;
}
.twitter-control-right {
right:0;
}
/*************************
******Sponsor CSS****
**************************/
#sponsor {
background-color: #1881a2;
background-image: url("../images/sponsor-bg.jpg");
background-position:50% 0;
background-size: cover;
background-repeat:no-repeat;
position: relative;
}
.light {
position: absolute;
right: 0;
bottom: 0;
}
#sponsor .col-sm-10 {
z-index: 10;
}
#sponsor h2 {
margin-top: 90px;
margin-bottom: 40px;
}
#sponsor .item ul {
font-size: 0;
padding: 0;
}
#sponsor .item ul li {
display: inline-block;
list-style: none;
width: 33.33%;
margin-bottom: 75px;
}
#sponsor .item ul li:last-child {
margin-right: 0
}
.sponsor-control-left,
.sponsor-control-right {
color: #FFFFFF;
font-size: 24px;
position: absolute;
top: 20%;
}
.sponsor-control-left {
right: 12%
}
.sponsor-control-right {
right: 10%
}
/*************************
******Map CSS****
**************************/
#map {
position: relative;
}
#gmap {
height:450px;
}
/*************************
******Contact CSS****
**************************/
.contact-section {
background-color: #f7ab24;
background-image: url("../images/contact-bg.jpg");
background-position:60% 0;
background-size:contain;
background-repeat:no-repeat;
position: relative;
}
.ear-piece {
position: absolute;
left: 0;
top: 0;
}
#contact .container {
padding-top:47px;
}
#contact h3 {
text-transform:inherit;
color: #373737;
}
#contact-section h3 {
margin-bottom: 25px
}
#contact address {
font-size: 18px;
color: #373737;
}
.contact-text {
margin-bottom: 35px;
display: block;
}
#contact-section .form-control {
border-color: #ae750d;
box-shadow:none;
outline: 0 none;
border-radius: 0;
color: #797979;
font-size: 18px;
}
#contact-section .form-control:focus {
border-color: #ae750d;
}
#contact-section input {
height: 44px;
}
#contact-section textarea {
height: 90px;
resize:none;
}
#contact-section .btn-primary {
background-color: #373737;
color: #f7ab24;
border: none;
font-size: 24px;
padding: 6px 42px;
margin-bottom: 110px;
margin-top: 10px
}
#contact-section .btn-primary:hover {
background-color: #212020;
color: #fff
}
/*************************
******Footer CSS****
**************************/
#footer {
background-color: #212121;
background-image: url("../images/footer-bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
font-size: 20px;
padding: 35px 0;
}
#footer a {
color:#f7ab24
}
#footer a:hover {
color:#ff0080
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Melodie Rooker Music</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script src="https://use.fontawesome.com/6740b2e08a.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
<header id="header" role="banner">
<div class="main-nav">
<div class="container">
<div class="header-top">
<div class="pull-right social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-spotify"></i>
</div>
</div>
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="index.html">
<img class="img-responsive" src="images/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
<li class="scroll">Explore</li>
<li class="scroll">Biography</li>
<li class="no-scroll">Sample</li>
<li class="scroll">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!--/#header-->
<section id="home">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<!-- <ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol> -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
<!-- <div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div> -->
</div>
<!--<div class="item">
<img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
</i>
</div>
</div>
</div>
</div> -->
</section>
<!--/#home-->
<section id="explore">
<div class="container">
<div class="row">
<div class="watch">
<img class="img-responsive" src="images/watch.png" alt="">
</div>
<div class="col-md-4 col-md-offset-2 col-sm-5">
<h2>Upcoming Show<br>McLeod's Publick House</h2>
</div>
<div class="col-sm-7 col-md-6">
<ul id="countdown">
<li>
<span class="days time-font">00</span>
<p>days </p>
</li>
<li>
<span class="hours time-font">00</span>
<p class="">hours </p>
</li>
<li>
<span class="minutes time-font">00</span>
<p class="">minutes</p>
</li>
<li>
<span class="seconds time-font">00</span>
<p class="">seconds</p>
</li>
</ul>
</div>
</div>
<div class="cart">
<i class="fa fa-map-o"></i> <span>Get Directions</span>
</div>
</div>
</section><!--/#explore-->
<section id="event">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<div id="event-carousel" class="carousel slide" data-interval="false">
<h2 class="heading">Explore</h2>
<a class="even-control-left" href="#event-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="even-control-right" href="#event-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
<h4>Melodie and Ricky Rooker</h4>
<h5>vocals, lead guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
<h4>Melodie Rooker</h4>
<h5>and the Loud Boyz</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
<h4>McLeod's Publick House</h4>
<h5>We became a part of the "family"</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="guitar">
<img class="img-responsive" src="images/guitar.png" alt="guitar">
</div>
</div>
</div>
</section><!--/#event-->
<section id="about">
<div class="guitar2">
<img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
</div>
<div class="about-content">
<h2>Biography</h2>
<p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>
</div>
</section><!--/#about-->
<section id="twitter">
<div class="container">
<div class="row">
<div class="col-md-12">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</section><!--/#twitter-feed-->
<section id="contact">
<!-- <div id="map">
<div id="gmap-wrap">
<div id="gmap">
</div>
</div>
</div><!--/#map-->
<div class="contact-section">
<div class="ear-piece">
<img class="img-responsive" src="images/ear-piece.png" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-4">
<div class="contact-text">
<h3>Contact</h3>
<address>
E-mail: melodie#melodierookermusic.com<br>
Phone: (417) 771-9817<br>
</address>
</div>
<div class="contact-address">
<h3>Find me in</h3>
<address>
Nashville, TN
</address>
</div>
</div>
<div class="col-sm-5">
<div id="contact-section">
<h3>Send a message</h3>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" required="required" placeholder="Email">
</div>
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#contact-->
<footer id="footer">
<div class="container">
<div class="text-center">
<p> Copyright ©2017 Melodie Rooker All Rights Reserved</p>
</div>
</div>
</footer>
<!--/#footer-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/gmaps.js"></script>
<script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/coundown-timer.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You are using Bootstrap, but you're not taking full advantage of Bootstrap's Grid System and positioning.
You can also check out Bootstrap Examples to find existing HTML structures that you can look at, copy and use.
In your case, the issue is that your .navbar-brand is using a fixed width instead of a responsive width set in percentages. This means that when you scale down the client window to Mobile size, your CSS still say that your .navbar-brand is suppose to be width: 435px;, which gives too little space for the button to appear on the same row.
If you don't want to use the Bootstrap Exampels that I linked to above, or the Bootstrap Grid System taht I also linked to above, you can solve this issue with a CSS Media Query.
For example:
#media(max-width: 767px) {
.navbar-brand {
width: 300px;
}
}
That would change the width of your .navbar-brand to 300px whenever the device has a smaller width than 768px (Usually considered mobile devices). However I suggest that you look at the two first links if you're already using Bootstrap.
I can't position div's under my image slider. They all go above the slider as if the slider isn't within the container. Whenever I try to put another div under the wrapper the position is completely off. Is it because I have the slider in a wrapper div?
<body>
<div class="container" id="container-1">
<!--Navigation Begin-->
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="../Images/nav-logo.png" alt="Breakday Charters Logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>About</li>
<li>Booking</li>
<li>Report</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<h3 id="number-head">Get Hooked</h3>
<p id="nav-number">(252)xxx-xxxx</p>
<li><img src="../Images/hook.png" alt="hook" id="nav-hook"/></li>
</ul>
</ul><!-- end nav pull-right -->
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
<!--================Carousel===============-->
<div id="wrapper">
<div id="carousel">
<img src="../Images/Carousel/breakday-boat-lrg.png"alt="Breakday Charters Boat" width="990" height="450" class="img-responsive" />
<img src="../Images/Carousel/turtle.png" alt="turtle" width="990" height="450" class="img-responsive"/>
<img src="../Images/Carousel/justin-and-fish.png" alt="Captain Justin" width="990" height="450" class="img-responsive" />
<img src="../Images/Carousel/shark.png" alt="shark" width="990" height="450" class="img-responsive" />
</div>
<div id="pager"></div>
</div><!--wrapper div end-->
</div><!--container-->
CSS:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/*Navigation*/
#custom-nav {
min-height:85px;
background: #FFF;
border-bottom:#0e76bc medium solid;
}
.nav.navbar-nav li a {
color: #0E76BC;
margin-top:25px;
font-size:15px;
}
.nav.navbar-nav li a:hover {
color: #494238;
}
.nav.navbar-nav.pull-right li #nav-hook {
position: absolute;
z-index: 1031;
top: -40px;
}
.nav.navbar-nav.pull-right #nav-number {
font-size: 16px;
color: #333;
font-weight: bold;
}
.nav.navbar-nav.pull-right #number-head {
font-weight: bold;
color: #0e76bc;
}
.nav.navbar-nav.pull-right {
margin-top: 5px;
}
/* --------------------------------------
Carousel
-------------------------------------- */
#wrapper {
background-color: #fff;
width: 100%;
height: 450px;
margin-top: -225px;
overflow: hidden;
position: absolute;
top: 40%;
left: 0;
}
#carousel img {
display: block;
float: left;
clear:right;
}
#prev, #next {
background-color: rgba(255, 255, 255, 0.7);
display: block;
height: 450px;
width: 50%;
top: 0;
position: absolute;
}
#prev:hover, #next:hover {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
}
#prev {
left: -495px;
}
#next {
right: -495px;
}
#pager {
margin-left: -470px;
position: absolute;
left: 50%;
bottom: 10px;
}
#pager a {
border: 2px solid #fff;
border-radius: 10px;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px 0 0;
}
#pager a:hover {
background-color: rgba(255, 255, 255, 0.5);
}
#pager a span {
display: none;
}
#pager a.selected {
background-color: #fff;
}
For slider banner you can try this
html
<div class="banner">
<div class="bannerslider">
<div class="slidertxt">
<div class="slidernumber">
<div id="nav">
<ul>
<li><a class="active" href="#" onclick="goto('#1', this); return false">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bannerimage">
<div id="contentt">
<div class="contentbox-wrapper">
<div id="1" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png" title="Haani"> </p>
</div>
<div id="2" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
<div id="3" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
<div id="4" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
<div id="5" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
</div>
</div>
</div>
</div>
css :
.banner {
width: 900px;
height: 357px;
margin:0;
float: left;
}
.bannerslider {
width: 500px;
position: absolute;
height: 351px;
float: left;
z-index: 80;
background-size: 350px 351px;
margin: 0 0 0 2px;
}
.slidertxt {
font-family: 'AUdimat-Regular';
font-weight: normal;
text-shadow: 0 2px 1px #000000;
color: #fbfbfb;
font-size: 14px;
width: 500px;
margin: 60px 0 0 30px;
position: absolute;
}
#contentt {
overflow: hidden;
}
.contentbox-wrapper {
position: relative;
left: 0;
width: 5000px;
height: 100%;
}
.contentbox {
width: 975px;
height: 100%;
float: left;
}
.slidertxt p {
font-family: 'AUdimat-Bold';
color: #fbfbfb;
font-size: 30px;
width: 960px;
}
.slidernumber {
height: 30px;
margin-top: -40px;
position: relative;
z-index: 10000;
}
#nav {
margin-top: 0;
}
#nav ul li {
display: inline;
}
.slidernumber a {
color: #fbfbfb;
text-decoration: none;
font-size: 13px;
font-family: 'AUdimat-Regular';
padding: 0 5px 0 5px;
margin: 5px 5px 0 10px;
display: inline;
float: left;
}
#nav a.active {
background: #fbfbfb;
border: 1px solid #fbfbfb;
border-radius: 10px;
color: #8a0338;
}
.bannerimage {
width: 975px;
height: 350px;
z-index: 0;
margin: 1px 2px 0 5px;
float: right;
}
JS :
function goto(id, t){
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#nav a').removeClass('active');
$(t).addClass('active');
}
you can also try slider banner