so I'm making a website in wordpress, and I keep struggling with the main menu. The menu does some things stated in the media queries, but leaves out other things. The hamburger menu button is shown, but I can't click it. I don't know how I can fix it.
This is the code from header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and
everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-
files/#template-partials
*
* #package epw_theme
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('style.css'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="hero">
<div class="fullwidthbar">
<h1 id="headertext"><a id="headertext" href="<?php echo esc_url( home_url(
'/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<nav id="site-navigation" class="main-navigation hdftbg" role="navigation">
<div class="ham">
<?php wp_nav_menu(array(
'theme_location' => 'menu-1',
'menu_id' => 'myTopnav',
'menu_class' => 'topnav'
)); ?>
<div class="test">
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">☰</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}</script>
</nav>
</div>
<div id="content" class="site-content">
</div>
And the css that goes with it:
/* Add a background color to the top navigation */
.topnav {
background-color: #1d1f20;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the color of links on hover */
.topnav a:hover {
color: #f77;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
color: #000000 !important;
}
.icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links. Show the
link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav {
width: 100%;
}
}
.test {
display: none;
}
/* The "responsive" class is added to the topnav with JavaScript when the
user
clicks on the icon. This class makes the topnav look good on small screens
(display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
z-index: 9999;
display: block;
}
.test {
display: block;
}
.topnav.responsive a.icon {
position: absolute;
right: 0 !important;
top: 0 !important;
}
.icon {
position: absolute;
top: 10px;
left: 10px;
z-index: 99999;
}
.menu-item {
width: 100% !important;
}
.superflex {
position: absolute !important;;
}
}
p.navigatie {
display: none;
}
ul {
float: right;
}
.ham {
background-color: #1D1F20;
width: 100%;
height: 3em;
}
#header{
margin-top: -55px;
width: 100%;
height: 100%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-2.jpg);
background-size: cover;
z-index: -100;
}
#header h3{
position: absolute;
margin-top: 300px;
}
#header h4{
position: absolute;
margin-top: 400px;
}
#arrowdown{
width: 150px;
position: absolute;
margin-top: 600px;
left: 50%;
transform: translate(-50%, -50%);
}
#headersec{
margin-top: -55px;
width: 100%;
height: 75%;
background-image: url(http://st359450.cmd16c.cmi.hanze.nl/epw/wp-
content/uploads/2017/06/NorwayVang-small.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#tagline{
font-style: italic;
font-size: 50px;
text-align: center;
color: white;
}
#lowerline{
font-style: italic;
font-size: 45px;
text-align: center;
color: #ccc;
}
html {
box-sizing: border-box;
height: 100%;
width: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.hero {
margin: 0 auto;
padding-top: 0px;
width: 100%;
}
.hero h1 {
margin-top: 0;
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hero {
color: #fff;
font-family: 'Raleway', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
.hero .hdftbg {
clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}
.hdftbg{
width: 50%;
padding-left: 10px;
background-color: #1D1F20;
float: right;
z-index: 100;
margin-top: 0;
}
.fullwidthbar{
width: 100%;
background-color: #1D1F20;
height: 35px;
margin-bottom: -1px;
}
#headertext {
padding-top: 5px;
font-size: 18px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#headerfield {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.menu-items{
margin-top: -20px;
}
The .hdftbg, .fullwidthbar and .hero are all used for the clip path, which is why I can't remove them. Any idea how to fix this?
Related
I copied the navigation bar from one Youtube video. I wanted to try Bootstrap and when I added it to my project, the text changed the font and the links went up in the bar.
So how do I make the text look the same as it did before Bootstrap?
Before Bootstrap:
After Bootstrap:
etusivu.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuosisata | Etusivu</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/navigation.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/navigation.js"></script>
</head>
<body>
</body>
</html>
navigation.html:
<nav>
<div class="logo">
<h4>Test</h4>
</div>
<ul class="nav-links">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
navigation.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #4a495d;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #4a495d;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
index.php:
<?php
if (isset($_GET['p'])){
$pageId = preg_replace('/[^A-Za-z0-9\-\_]/', '', $_GET['p']);
if (file_exists('pages/' . $pageId . '.html')) {
readfile('pages/' . $pageId . '.html');
} else {
readfile('pages/404.html');
}
} else {
readfile('pages/etusivu.html');
}
include 'navigation.html';
?>
P.S. I'm sorry for the bad English :D
I have tested the override works. please open in full page and see if this the result you are looking for?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #4a495d;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex !important;
justify-content: space-around !important;
width: 30% !important;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #4a495d;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuosisata | Etusivu</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/navigation.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/navigation.js"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>Test</h4>
</div>
<ul class="nav-links">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<?php
if (isset($_GET['p'])){
$pageId = preg_replace('/[^A-Za-z0-9\-\_]/', '', $_GET['p']);
if (file_exists('pages/' . $pageId . '.html')) {
readfile('pages/' . $pageId . '.html');
} else {
readfile('pages/404.html');
}
} else {
readfile('pages/etusivu.html');
}
include 'navigation.html';
?>
</body>
</html>
I am trying to use the following header menu template across my website. unfortunately, the menu hides the top part of my page content. I am a newbie. Please help. I tried, removing z-index, adding bottom margin, noting works.
The header.php code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
<a href="" class="logo">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
class="logoimage"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li class="contactme">Contact Me</li>
<li class="aboutme">About Me</li>
<li class="projects">Projects</li>
<li class="Home">Home</li>
</ul>
</header>
<!-- partial -->
<style>
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fffceb;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background: rgb(255, 245, 246);
color: rgb(247, 133, 152);
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.logoimage{
width: 130px;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.Home{
order: 1;
}
.projects{
order: 2;
}
.aboutme{
order: 3;
}
.contactme{
order: 4;
}
}
#media only screen and (max-width: 600px) {
.menu{
display: flex;
flex-direction: column-reverse;
}
}
</style>
</body>
</html>
Then I have a index.php where I include this header.
The style related to my index.php is
body {
background-color: #f2f2f2;
}
.formular input:disabled {
background-color: #dddddd;
}
.hint {
color: grey;
}
.title {
font-weight: bold;
}
p.subtitle {
font-weight: bold;
}
.requiredSymbol {
color: red;
}
.formular input[readonly="readonly"] {
background-color: #dddddd;
}
form.formular,
.validationEngineContainer {
/*background-color: #FFFFFF;*/
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #a5a8b8;
width: 700px;
margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
padding: 15px;
border: 1px solid #b5b8c8;
border-radius: 5px;
}
Your header css should have a position:relative. And you can add some margin to add distance from whatever is in the body.
Example shown below:
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
position: relative;
width: 100%;
z-index: 3;
margin-bottom: 10px;
}
So I just learned about the include function, I made a:
include ("header.php"); and
include ("mainSection.php"); but they seem to overlap each other.
is it something with my css or html?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Chocoot</title>
</head>
<body>
<div id="wrapper">
<?php
include ("header.php");
include ("mainSection.php");
?>
</div>
</body>
</html>
The header.php
<header id="logoheader">
<h1 id="logo">Chocoot</h1>
<div id="orangeborder1">
<nav>
<ul>
<li>Home</li>
<li>Chocolate</li>
<li>Beans</li>
<li>History</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="slider"></div>
<div id="orangeborder2"></div>
</header>
The mainSection.php
<section id="midSection">
</section>
CSS:
*{
margin: 0px;
padding: 0px;
}
#logoheader{
width: 1366px;
height: 30px;
background-color: #2b292a;
}
body{
background-color: #171515;
}
#wrapper{
width: 1366px;
height: auto;
margin: auto;
background-color:#2b292a;
}
header{
width: 1366px;
height: 475px;
float: left;
}
#logo{
font-family: Georgia;
font-weight: bold;
font-style: italic;
font-size: 32px;
color: white;
margin-left: 28px;
margin-top: -3px;
margin-bottom: -3px;
float: left;
}
#orangeborder1{
width: 1366px;
height: 30px;
float: left;
background-color: #2b292a;
}
#orangeborder1{
width: 1366px;
height: 86px;
background-color: #9b3210;
float: left;
}
nav ul li{
float: left;
list-style: none;
margin-top: 28px;
}
nav ul li a{
font-family: Georgia;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #fff;
}
nav ul li:first-child{
margin-left: 250px;
}
nav ul li:nth-child(2){
margin-left: 64px;
}
nav ul li:nth-child(3){
margin-left: 90px;
}
nav ul li:nth-child(4){
margin-left: 63px;
}
nav ul li:nth-child(5){
margin-left: 50px;
}
a{
text-decoration: none;
}
#slider{
width: 1366px;
height: 301px;
float: left;
background-color: black;
color: white;
}
#slider2{
width: 1366px;
height: 301px;
float: left;
background-color: black;
color: white;
}
#orangeborder2{
width: 1366px;
height: 59px;
background-color: #9B3210;
float: left;
}
#midSection{
width: 1366px;
height: 570px;
background-color: #2b292a;
float: left;
}
#pictureContainer{
width: 250px;
height: 570px;
float: left;
}
footer{
width: 1366px;
height: 155px;
background-color: #433f40;
float: left;
}
I hope you can help me :s
Delete the 'height: 30px;' in the #logoheader block of your css. So it looks like this:
#logoheader {
width: 1366px;
background-color: #2b292a;
}
Does that do anything? You should not have to tell elements how far to start down on a page. By default they will stack on each other unless otherwise told.
So I created a wordpress and on that wordpress I made a custom template.
The custom template shows up fine, But when I try to add plugins or text to my custom template via the wordpress dashboard nothing shows up. Its not adding it to the code or adding it to the page.
Below are some pic of what I mean.
This is the wordpress dashboard where I am adding at, As you can see my template is MainTest which I made myself and works perfect
SS of the Wordpress Dashboard
Now this is the SS of the page, As you can see the words test test test are not showing up anywhere.
This is the SS of the page
Here is the code for the MaintTest template page
<?php
/*
Template Name: MainTest
*/
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="wp-content/themes/iribbon/newaddons/animate.css">
<link rel="stylesheet" type="text/css" href="wp-content/themes/iribbon/newaddons/newstyle.css">
<script type='text/javascript' src='rotate.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Fancy/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="Fancy/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class='container-fill'>
<?php include 'wp-content/themes/iribbon/newaddons/header.php'; ?>
<?php include 'wp-content/themes/iribbon/newaddons/footer.php'; ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
And here is the CSS that controls it. Yes I understand my CSS looks sloppy.
#midbar {
background-color: #FFFFFF;
height: 115px;
margin: 0 auto;
opacity: 0.9;
position: relative;
top: 0px;
width: 1200px;
z-index: 1111;
}
#midbar img {
position: absolute;
top: -20px;
left:50%;
margin-left: -160px;
width: 300px;
height: 200px;
min-height: 50px;
min-width: 250px;
vertical-align: middle;
z-index: 2222;
opacity:4.0;
}
.top {
position: relative;
top: -20px;
width: 100%;
height: 115px;
background-color: #FFFFFF;
z-index: 3333;
opacity: 0.9;
margin: 0 auto;
width: 100%;
}
#navigation {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
left: 0;
position: absolute;
top: 45px;
}
#navigation ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navigation ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#navi {
border-bottom-style: dotted;
border-top-style: dotted;
border-width: 2px;
position: absolute;
right: 0;
top: 45px;
}
#navi ul li {
position: relative;
display:inline-block;
margin:0 23px 0 0;
z-index: 3333;
}
#navi ul li a {
padding-left:15px;
text-decoration: none;
text-align: center;
padding-right:15px;
color:#000000;
display:block;
font-family: 'Gentium Book Basic', serif;
font-size:18px;
}
#slideshow{
width: 100%;
height: 100%;
}
#slideshow{
-webkit-animation: cssAnimation 8s 16 ease-in-out;
-moz-animation: cssAnimation 8s 16 ease-in-out;
-o-animation: cssAnimation 8s 16 ease-in-out;
}
#-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); }
}
#imgholder {
position: relative;
top: -150px;
width: 100%;
height: 500px;
overflow: hidden;
}
#social {
position: relative;
width: 20%;
top: 30px;
margin-left: auto;
margin-right: auto;
}
#social .fb {
position: relative;
left: -5%;
}
#social .pin {
position: relative;
left: 0%;
}
#social .tweet{
position: relative;
left: 5%;
}
#foot {
width: 100%;
height: 200px;
position: absolute;
margin-right: auto;
margin-left: auto;
bottom: 0;
background-color: #FFFFFF;
margin:0;
text-align: center;
font-size: 12px;
}
#pics {
width: 100%;
height: 300px;
position: relative;
top: -100px;
margin-right: auto;
margin-left: auto;
}
#pics .ball {
position: relative;
vertical-align: middle;
left: 140px;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .light {
position: relative;
left:165px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#pics .car {
position: relative;
left: 190px;
vertical-align: middle;
border: 2px solid #03acfb;
box-shadow: 0 8px 6px -4px #000000;
}
#piccon {
width: 1400px;
height: 300px;
position: relative;
margin-right: auto;
margin-left: auto;
min-width: 800px;
}
#rotating-item-wrapper {
position: absolute;
width: 1940px;
height: 347px;
top: 60px;
z-index: 8888;
left: 0;
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}
body {
overflow: hidden;
}
#mainabout img {
width: 100%;
height: 100%;
}
#maintext {
width: 800px;
min-width: 300px;
height: 600px;
min-height: 300px;
position: absolute;
top: 175px;
left: 40%;
margin-right: -250px;
text-align: center;
font-size: 18px;
}
#mainabout {
background-color: green;
position: absolute;
left: 40%;
margin-left: -650px;
top: 155px;
width: 600px;
height: 500px;
min-height: 600px;
}
.hidden {
display: none;
}
.images {
width: 50%;
position: relative;
top: 300px;
height: 300px;
display: block;
}
.images img {
width: 30%;
height: 60%;
}
Please note, The css controls more then just this page thats why there is so much in it.
The reason for no content showing up is because you are not including the loop in your html body. See the codex for further details: http://codex.wordpress.org/The_Loop
Here is an example with the presentation separated from the logic which will allow you to have more control over the DOM.
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- This will output the title of your page-->
<div class="page-header">
<h1><?php the_title(); ?></h1>
</div>
<!-- the_content() function is required to output "test test test" -->
<?php the_content(); ?>
<?php endwhile; else: ?>
<!-- If there is an error, this 404 message will be displayed-->
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</body>
Also, you should be calling your header and footer with the following functions:
Header: http://codex.wordpress.org/Function_Reference/get_header
<?php get_header(); ?>
Footer: http://codex.wordpress.org/Function_Reference/get_footer
<?php get_footer(); ?>
You should add the loop to get the things that should be on the page. It's also reffered to as The Loop. Below the easiest example: show the content or say the page couldn't be found.
Insert that between your header and footer and you should be fine.
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; else:
print('<p>Sorry, this page couldn`t be found.</p>');
endif;
?>
I have this code for my header.php
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>
<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
and this one in my style.css:
body {
background-color: #ece8e5;
}
.logo{
float: left;
}
.BDtext {
text-align: center;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Menu */
#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;} /* Current Page Background Colour */
nav {
height: 40px;
width: 100%;
background: #455868; /* Menu Background Colour */
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4; /* Hover Over A Page Background Colour */
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 600px) {
.desktop {display:none;}
.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}
#media only screen and (min-width : 601px) {
.mobile {display:none;}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Menu */
my problem is.
my .mobilogo code in my CSS will not center the image.
I need this image to appear in the center of the page and not be aligned to the left.
please can someone help tell me what is holding it back?
.mobile class could have text-align:center; if you don't want to use the text-align try the below:
Also you can give .mobilogo width and have margin:0 auto; to center it.
.mobilogo{
margin:0 auto;
width:50%;
height: 50%;
}
In order for the width and height to work with percentages you need to give the parent elements width and height.
Make your .mobilogo class block and give it margin: 0 auto like this. Even though it has a width of 50% you'll have to make it a block element to center it with margin: 0 auto, or else you'll have to specify the width in pixels.
Like this:
.mobilogo {
margin: 0 auto;
display: block;
}