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.
Related
I am creating a website and right now I am stuck.
As of now I am creating the dashboard of the website.
It has a header for the basic settings (Home, Profile and Log out) buttons.
Body which contains the navigation tools on the left and at the main body page which is located beside it.
And of course the footer below it.
It should look like this:
It fine like that but some how when I view it in using the "toggle device toolbar" under the devtools, it look like this:
How can I solve this overshoot.
Here is the code:
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
<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://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="page-container">
<div id="content-wrap">
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div style="text-align: center;">
<div class="leftForm hide-on-med-and-down">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
this is a problem that can be solved in many ways, the best way to solve footer issues (and header) in my opinion is following this trick: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
solution:
set a fixed height of your footer{ height: 10px} and set body{ margin-bottom: 10px}
UPDATE BASED ON COMMENTS
I am not able to see if this works as i cannot recreate the code in my environment.
CSS
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
margin-bottom: 81px;
position: relative;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
Another possibily solution (I change php tag for this example, snippet seems not to work, maybe wv and wh doesn't work there, but it does if you try directly saving as html file, or try it here)
<html>
<head>
<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://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: calc(100% - 64px);
display: flex;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
</style>
</head>
<body>
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div id="page-container">
<div id="content-wrap">
<div style="text-align: center; width: 100vw;">
<div class="leftForm hide-on-med-and-down">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
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>
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 would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT
I want a sidebar which takes the full height of the screen and doesn't change when scrolling down.
So when I scroll only the contents changes but the navbar stays always the same.
I made a first example: http://jsfiddle.net/CwSD6/
But the none-scroll functionality is missing...
Regards
EDIT:
You need to use position: fixed, and top, bottom, left with value 0.
http://jsfiddle.net/CwSD6/1/
it can be done by doing position: fixed; in <aside>
see this fiddle jsfiddle
Try this:
aside
{
position: fixed;
width: 200px;
height: 100%;
top: 0;
left: 0;
border: 1px solid #111;
}
Hope this helps
I use the jQuery method as using fixed or absolute usually screws with my grid layout. In the example below my grid collapses when under 990px width so you would need to change this assuming you are doing responsive.
$(window).resize(function() {
var doc_height = $(document).height();
var doc_width = $(document).width()
if (doc_width > 990) {
$('#sidebar').css("height", doc_height);
} else {
$('#sidebar').css("height", 'auto');
}
});
Although this may not be the most efficient way, you don't need to set variables. I find it helps with readability.
Kind Regards,
M
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
p {
font-size: 1.125rem;
}
label {
display: flex;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
HTML code start here
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/adminhome.css">
<link href=”https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<link href="https://allfont.net/allfont.css?fonts=montserrat-bold" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<title>home</title>
</head>
<body>
<header>
<div class="tpe">
<p>Admin</p>
</div>
<div class="headbar">
<a href="adminallusers.html" class="allusers">
<i class="fas fa-users"></i>
<span class="users">All Users</span>
</a>
<a href="#" class="admin">
<i class="fas fa-user"></i>
<span class="user">Admin</span>
</a>
</div>
</header>
<nav>
<ul>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-item">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-ticket-alt"></i>
<span class="nav-item">Tickets</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-upload"></i>
<span class="nav-item">Upload</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-tasks"></i>
<span class="nav-item">Status</span>
</a>
</li>
<li>
<a href="#" class="logout">
<i class="fas fa-sign-out-alt"></i>
<span class="nav-item">Log out</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
HTML end here
CSS start from here
#import url('https://allfont.net/allfont.css?fonts=montserrat-bold');
*{
margin: 0;
padding:0;
outline: none;
border: none;
text-decoration: none;
box-sizing: border-box;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}
body{
background-color: white;
}
header{
position: fixed;
background:#404258;
height: 45px;
width: 100%;
overflow: hidden;
transition: width 0.2s linear;
}
header .tpe p{
font-size: 28px;
font-weight:900;
float: left;
color:white;
text-transform: uppercase;
margin-left:130px;
}
header a{
position: relative;
color: white;
font-size: 15px;
font-weight: 600;
display: table;
width: 300px;
padding: 10px;
}
header:hover{
background-color: none;
}
.admin{
padding:1px;
background:none;
text-decoration: none;
float: right;
margin-top:0px;
width:10%;
margin-right:-10px;
font-size: 15px;
font-weight:550;
color: white;
}
.allusers{
padding:1px;
background:none;
text-decoration: none;
float: right;
width:20%;
margin-top:0px;
margin-right:-100px;
font-size: 15px;
font-weight:550;
color: white;
}
.user{
position:relative;
top:10px;
margin-right:-50px;
width: 250px;
}
.users{
position:relative;
top:10px;
margin-right:auto;
width: 250px;
}
nav{
position: fixed;
top:45px;
bottom:-60px;
height: 100%;
left: 0;
background:#404258;
width: 90px;
overflow: hidden;
transition: width 0.2s linear;
}
nav a{
position: relative;
color: white;
font-size: 14px;
font-weight:600;
display: table;
width: 300px;
padding: 10px;
}
.fas{
position: relative;
width: 70px;
height: 40px;
top: 14px;
font-size: 20px;
text-align: center;
}
.nav-item{
position:relative;
top:12px;
margin-left:10px;
}
nav a:hover{
background: #A6ADC2;
}
nav:hover{
width: 200px;
transition: all 0.5s ease;
}
.logout{
position: absolute;
bottom: -20;
}
CSS end here