My website is www.rosstheexplorer.com.
I love the look of my site when the browser is 1302px wide or being viewed on a mobile device.
Although between 600px - 1302px the menu overlaps the header which is really frustrating.
This is my header.php
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package Penscratch
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div >
<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
</div>
</div>
<div >
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</div>
<div >
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
</a>
<?php endif; // End header image check. ?>
</div>
This is my additional CSS
#media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
*.header img {
max-width: none;
width: 100%;
}
#media screen and (min-width: 75em)
{
.site {
max-width: 1153px;
margin: -50px auto;
padding: 54px 108px;
}
}
#media screen and (min-width: 800px) {
.menu li li a {
font-size: 0.8em;
border: 1px rgb(56, 57, 59)
}
}
#media screen and (max-width: 799px) {
.menu li a {
font-size: 1.2em;
color: black;
border: 3px rgb(56, 57, 59);
}
}
#media screen and (max-width: 799px) {
.menu ul li {
border-bottom: 1px solid lightgrey;
}
}
#media screen and (max-width: 799px) {
.main-navigation li:hover > a
{color: grey}
}
#media screen and (max-width: 799px) {
.menu li li a {
font-size: 0.8em;
border: 3px rgb(56, 57, 59);
color: grey;
}
}
.main-navigation {
margin-top: 437px;
}
#media screen and (min-width: 800px) {
.main-navigation {
padding-top: 0px;
background-color: rgb(56, 57, 59) ;
font-size: 1.5125em;
}
}
#media screen and (min-width: 800px) {
.main-navigation ul ul
{
font-size: 0.8em;
background-color: rgb(56, 57, 59) ;
border: 1px rgb(56, 57, 59) ;
}
}
#media screen and (max-width: 799px) {
.main-navigation {
margin-bottom: -20px;
}
}
.site-header {
border-bottom: 0px solid #eee;
}
What I Have Tried
In header.php I tried to put the navigation menu and header in separate divs and then try things like "div style = float:left" and "div style = clear:both".
In Additional CSS I tried altering the position of .main-navigation, I tried static, sticky and absolute.
In Additional CSS I added margin-top:XYZpx to .main-navigation. If XYZpx was large enough it would prevent there being overlap but it would also sometimes leave massive white spaces between the navigation menu and header image which I do not want. I want the two elements to sit neatly side by side. I know I could nest .main-navigation in multiple media queries and change the margin-top value for each media query but that seems very inefficient.
Does someone have a simpler solution?
There are three issues:
Your class body.custom-background tag has the background-image
property and there is an image loaded from there that sits behind the header images you want to use. In essence, you're
loading two images where you should be loading one. to fix that we
need to reset it using
body.custom-background {
background-image: none;
}
I quote RoToRa's answer here as it is more elequant that I can
ever hope to be.
Images in HTML are inline elements and are by default placed on the
font base line, so what you are seeing is probably the space for the
descenders. The usual way around this is either setting them to
display: block or vertical-align: bottom.
To fix that we need to use the #media rule with your specific cutoff point since applying the display property to the image by itself will lead to both images being loaded at the same time. So we use the following to address that:
#media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
Your nav-menu has a white border on top and it doesn't have its
margins reset. To fix that we reset both by using the following:
#media screen and (min-width: 800px) {
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
Now we try put it all together at the bottom of your CSS sheet and see what happens
body.custom-background {
background-image: none;
}
#media screen and (min-width: 800px)
{
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
#media screen and (min-width: 661px) {
img.header-img {
display: block;
}
}
Related
BACKGROUND
As part of a course, I created a very basic WordPress theme (PHP) in Notepad++.
Worked fine.
Added some plugins. Worked fine.
Added contact form and discussion plugins. Also did some styling.
PROBLEM
Now images do not show up, only a space where the image should be.
Not sure if it is the plugins (left support requests) or the styling (asking here).
Am pasting all my code here (PHP modules and CSS). Hopefully someone more experienced can spot the error.
WHAT I HAVE TRIED
I floated the nav to the left. Added a clear to the next element
(class main) but this did not help.
Images show when I changed theme to another WordPress theme (Twenty Twenty). Images also show in WordPress customizer mode, but not when post / page is published.
Support requests on Wordpress, discussion forum plugin (Asgaros) (screenshots here), contact form plugins (forminator, WP Forms)
EDIT: Added screenshots (developer tools, php error message, blog page, wp-admin page, customize theme page) in this Google Drive folder
CODE
header.php
<!-- HEADER.PHP START -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
<title>My first Wordpress Theme</title>
</head>
<body>
<div id="wrapper">
<header>
<div>
<h1 class ="title-heading" >The Internet Life</h1>
<p>Working and living with the web</p>
</div>
</header>
<nav>
<!-- <p>Navigeringsmeny. This will be the navbar area</p> -->
<ul>
<li class = "page_item">Home</li>
<?php wp_list_pages( '&title_li=' ); ?>
</ul>
</nav>
<!-- HEADER.PHP END -->
index.php The code in the section will show the blog posts on the start page, as opposed to other pages I manually create which will appear in the nav
<!-- PHP INSERT HEADER CODE -->
<?php get_header(); ?>
<div class="main">
<div id="content">
<article>
<!--START individual BLOG POSTS CODE -->
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();?>
<section>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</section>
<?php endwhile; endif;?>
<!--START individual BLOG POSTS CODE -->
</article>
</div>
<!-- PHP INSERT sidebar CODE -->
<?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
<?php get_footer(); ?>
sidebar.php
<!-- SIDEBAR.PHP START ASIDE -->
<aside class="sidebar">
<p>
Home
About
Contact
Ethics
History
Webtech
</p>
</aside>
<!-- SIDEBAR.PHP END ASIDE -->
footer.php
<!-- FOOTER.PHP START -->
<footer>
<div class="footerarea">
<p>Copyright abc</p>
</div>
</footer>
<!-- FOOTER.PHP END -->
page.php This is the template for how each page appears. The code inserts individual page content in the section
<?php
/**
* Template Name: Mall
*/
?>
<!-- PHP INSERT HEADER CODE -->
<?php get_header(); ?>
<div class="main">
<div id="content">
<article id="page-wrapper">
<section class="page_content">
<!-- START individual page CODE -->
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
the_content(); ?>
<!-- END individual page CODE -->
</section>
</article>
</div>
<!-- PHP INSERT sidebar CODE -->
<?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
<?php get_footer(); ?>
style.css
/*
Theme Name: FirstWordpress Practice
Author: abc
Description: def theme
Version: 1.0
License: GNU General Public License v2 or later
Tags: Fun
Text Domain: basic learning
*/
/*
colors
linen #f9eee7
lightest antique white #fce5da
lightish yellow peachpuff #f7d8ba
beige #F2A341
LIGHT BEIGe #F2D5BB
BROWN #BF815E
red #F21D1D
light red #F24444
*/
HTML{
margin: 0;
padding: 0;
}
header {
margin: 0 auto 0 auto;
padding: 1rem;
border: solid 2px #F24444;
color: #f9eee7;
}
body {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Orbitron', sans-serif, 'Montserrat';
}
h1, h2, h3, h4, h5, h6, h7, h8 {
font-family: 'Orbitron', sans-serif;
}
#wrapper {
background-color: #F21D1D;
font-family: 'Montserrat', sans-serif ;
margin: 0;
padding: 1rem;
}
#content {
background-color: #fce5da;
font-family: 'Orbitron', sans-serif, 'Montserrat';
margin: 0 auto;
padding: 2rem;
line-height: 1.2; /*accessibility large font with extra letter spacing and line hight*/
letter-spacing: 1px;
}
/*#content {
width: 95%;
background: whitesmoke;
margin: 0 auto;
}*/
title-heading {
margin-top: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111; /* Black */
}
nav li {
float: left;
}
nav li a {
display: block;
/*color: #ffe6ff; the original black color*/
color: #F24444;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: uppercase;
}
/* Change the navigation link color to #111 (black) on hover */
nav li a:hover {
background-color: #29293d;
color: #f7d8ba;
}
/*link styling*/
section a {
color: #F21D1D;
text-decoration: none;
font-weight: bolder;
}
/* Change the link color to #111 (black) on hover */
section a:hover {
background-color: #29293d;
color: #f7d8ba;
}
/* Style page content */
.main {
clear: both; /*Clearing the float from the navigatation element above main in header php*/
margin: 0 160px 0 0;
/*margin-right: 160px; Same as the width of the sidebar */
padding: 0px 10px;
}
/*Creating spacing
#page-wrapper, .page_content {
margin: 1rem;
padding: 1rem;
}*/
/* The sidebar menu */
.sidebar {
height: 100%; /* Full-height*/
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The sidebar menu links */
.sidebar a {
padding: 6px 16px 6px 8px;
text-decoration: none;
font-size: 25px;
color: #F24444;
display: block;
}
/* When you mouse over the navigation links color changes*/
.sidebar a:hover {
background-color: #29293d;
color: #f7d8ba;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
footer {
border: 3px solid #F24444;
margin-bottom: 0;
padding: 0.5rem;
color: #f9eee7;
}
Thanks
The issue was the z-index on the sidebar. I gave the img a higher z-index and they appeared.
2 of my pages in mobile aren't going full 100% width, you can see it here.
I've got <meta name="viewport" content="width=device-width" /> in my code, and I've tried various variations of it. The problem could be in my pages.phpfile, since the rest of the pages are custom templates?
Here's my code for page.php:
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content .site-content -->
</div>
<?php get_footer(); ?>
CSS:
#content {
margin: 0 auto;
max-width: 51em;
background: none;
float: none;
margin: 0 auto;
padding: 0;
}
#primary {
width: 100%;
}
I don't know if I'm missing something that's wordpress related, or messed up my code (I'm a beginner at coding), or what. Confused because my other pages are working alright and I can't see anything in the code that's causing it to be that thin width.
*btw - haven't figured out the nav in mobile yet, but you can see that it works in the other pages by checking out the link:
Home.
Everything is correct but I see scroll because your footer got some non-responsive codes.
in this page:
http://melmencarelli.com/about/
first, add box-sizing: border-box; to #footer-container and set width: 100% like this:
#footer-container {
width: 100%;
margin: 0 auto;
padding: 30px;
box-sizing: border-box;
}
then, set width: 100% for .footer-info, like this:
.footer-info {
float: left;
width: 100%;
margin-bottom: 25px;
}
in this page:
http://melmencarelli.com/
Do above instruction then set width: 100% for:
#media only screen and (max-width: 1023px) and (min-width: 0px)
#media only screen and (max-width: 1023px) and (min-width: 0px)
#media only screen and (max-width: 500px) and (min-width: 0px)
html input[type="button"] {
font-size: 14px;
padding: 20px 20px;
width: 100%;
}
also I see this:
<div class="home-button">
<a href="http://melmencarelli.com/mentoring/">
<input type="button" value="HOW WE WORK TOGETHER">
</a>
</div>
I recommend you to use this:
<div class="home-button">
<a href="http://melmencarelli.com/mentoring/">
<button>HOW WE WORK TOGETHER</button>
</a>
</div>
well, all looks good!
The above picture is what my nav bar more or less is supposed to look like. I'm coding my wordpress site from scratch and my nav bar with a header class="site-header" will not display:block or have its text-decoration removed. What's strange is that
.site-header nav ul li {
margin-right: 5px;
}
works. The boxes just don't show up for some reason.
Help would be much appreciated : )
/*
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/
body {
font-family: 'Malgun Gothic','맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif;
font-size: 20px;
color: #333;
}
a:link
a:visited {
color: #006ec3;
}
p {
line-height: 1.65em;
}
/* General Layout */
div.container {
max-width: 920px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
article.post {
border-bottom: 2px dotted #999;
}
article.post:last-of-type {
border-bottom: none;
}
/* Header */
.site-header {
border-bottom: 2px solid #999
}
/* Footer */
.site-footer {
margin-top: 30px;
border-bottom: 2px solid #999
}
/* Navigation Menus */
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1; }
.site-nav ul li {
list-style: none;
float: left;
}
/* Site Header Menu */
.site-header nav ul li {
margin-right: 5px;
}
.site-header nav ul li a:link,
.site-header nav ul li a:visited, {
display: block;
padding: 10px 18px;
border: 1px solid #BBB;
border-bottom: none;
text-decoration: none;
}
.site-header nav ul li a:hover {
background-color: grey;
}
<!--footer.php-->
<footer class="site-footer">
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'footer'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
<p><?php bloginfo('name'); ?> - © <?php echo date('Y');?></p>
</footer>
</div><!--/container-->
<?php wp_footer(); ?>
</body>
</html>
<!--functions.php-->
<?php
function learningWordPress_resources() {
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'learningWordPress_resources');
// Navigation Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu'),
));
<!--header.php-->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!--site-header-->
<header class="site-header">
<h1><?php bloginfo('name'); ?> </h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu($args); ?>
</nav>
</header><!--/site-header-->
<!--index.php-->
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
<?php endwhile;
else:
echo '<p>No content found</p>';
endif;
get_footer();
?>
}
Your code has a minor syntax error, causing your styles to not be applied:
.site-header nav ul li a:link,
.site-header nav ul li a:visited, {
The extra comma , at the end expects an additional selector, but was met with a {. Simply remove the extra comma. That should solve your problems.
Working demo:
/*
Theme Name: Yonsei Fencing
Author: Yonsei Student
Version: 1.0
*/
body {
font-family: 'Malgun Gothic', '맑은고딕', Arial, 돋움, Dotum, 굴림, Gulim, AppleGothic, Sans-serif;
font-size: 20px;
color: #333;
}
a:link a:visited {
color: #006ec3;
}
p {
line-height: 1.65em;
}
/* General Layout */
div.container {
max-width: 920px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* Header */
.site-header {
border-bottom: 2px solid #999
}
/* Navigation Menus */
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul:before,
.site-nav ul:after {
content: "";
display: table;
}
.site-nav ul:after {
clear: both;
}
.site-nav ul {
*zoom: 1;
}
.site-nav ul li {
list-style: none;
float: left;
}
/* Site Header Menu */
.site-header nav ul li {
margin-right: 5px;
}
.site-header nav ul li a:link,
.site-header nav ul li a:visited {
display: block;
padding: 10px 18px;
border: 1px solid #BBB;
border-bottom: none;
text-decoration: none;
}
.site-header nav ul li a:hover {
background-color: grey;
}
<div class="container">
<!--site-header-->
<header class="site-header">
<h1>Blog Name</h1>
<h5>Blog Desc</h5>
<nav class="site-nav">
<ul class="menu">
<li class="menu-item">Link 1
</li>
<li class="menu-item">Link 2
</li>
<li class="menu-item">Link 3
</li>
</ul>
</nav>
</header>
</div>
I have Googled this problem and while there are some hints at fixes, most are theme specific. I did find a link to create a print.css and it works somewhat but the menu navigation still prints over the content in the web page. I only want the content of the page to print...no header, footer, sidebar, or navigation menu. The style page I created via direction of the link is below. I also added the link to the header.php as directed. It seems the print.css works for everything but the navigation menu. There is a custom style sheet named nations-styles.css referred to in the header.php and located at /wp-content/themes/smartbusiness/css. I'm thinking there might be additional navigation problems that need to be address with that style sheet. I am new to CSS, so I'm not sure how to make this work so they navigation doesn't show up in the printing of the page. I've tried #header, .nav-box {display:none} and that doesn't seem to work either.
All help resolving this issue would be greatly appreciated.
print.css below
#media print {
body {background:white;
font-size:10pt;
margin:0 }
#sidebar { display:none }
#header { display:none}
#header, .nav-box {display:none}
#nav {display:none}
#content{ margin-left:0;
float:none;
width:auto }
.demo .red { color:black;
font-weight:bold }
#content a { font-weight:bold;
color:#000066;
text-decoration:underline }
#content{ margin-left:0;
float:none;
width:auto }
#footer, .ad { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
h3 { margin-left:10px;
margin-bottom:0px;
padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
img.centered { display: block;
margin-left: auto;
margin-right: auto; }
img.right { padding: 4px;
margin: 0 0 2px 7px;
display: inline; }
img.left { padding: 4px;
margin: 0 7px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid;
page-break-after:avoid; }
}
header.php below
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>">
<title><?php
/* Print the <title> tag based on what is being viewed. */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'smartbusiness' ), max( $paged, $page ) );
?></title>
<?php
global $shortname;
$favicon = get_option($shortname.'_favicon');
if ($favicon) {
?>
<!-- ~~~~~~ FAVICON ~~~~~~ -->
<link rel="shortcut icon" href="<?php echo $favicon; ?>" />
<?php } ?>
<meta name="viewport" content="width=device-width, <?php if (get_option($shortname."_zoom_feature") == 'No') { echo 'initial-scale=1.0'; } else { echo 'user-scalable=yes'; } ?>">
<?php wp_head(); ?>
<?php
$theme_color_skin = strtolower(get_option($shortname."_theme_color_skin"));
?>
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/<?php echo $theme_color_skin; ?>/css/ie.css" /><![endif]-->
<!--Added to work with minify - removed from functions.php
<link id="stylesheet_custom_style-css" media="screen" type="text/css" href="/wp-content/themes/smartbusiness/functions/custom-css-main.php" rel="stylesheet"> -->
<link id="stylesheet_custom_style-css" media="screen" type="text/css" href="/wp-content/themes/smartbusiness/css/nations-styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
</head>
<body <?php body_class('custom-background'); ?>>
<!-- wrapper -->
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<!-- section -->
<div class="section">
<h1 class="logo"><img src="<?php $custom_logo = get_option($shortname.'_logo'); echo $custom_logo; ?>" alt="<?php echo bloginfo('name'); ?>" /></h1>
<div class="contact-box">
<?php if (get_option($shortname."_phone_number")) { ?><strong class="phone"><?php echo get_option($shortname."_phone_number"); ?></strong><?php } ?>
<?php if (get_option($shortname."_social_links") == 'true') { ?>
<!-- social -->
<ul class="social">
<?php if (get_option($shortname."_social_links_twitter")) { ?><li><?php echo get_option($shortname."_social_links_twitter_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_facebook")) { ?><li><?php echo get_option($shortname."_social_links_facebook_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_pinterest")) { ?><li><?php echo get_option($shortname."_social_links_pinterest_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_dribbble")) { ?><li><?php echo get_option($shortname."_social_links_dribbble_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_vimeo")) { ?><li><?php echo get_option($shortname."_social_links_vimeo_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_googleplus")) { ?><li><?php echo get_option($shortname."_social_links_googleplus_caption"); ?></li><?php } ?>
<?php if (get_option($shortname."_social_links_rss")) { ?><li><?php echo get_option($shortname."_social_links_rss_caption"); ?></li><?php } ?>
</ul>
<?php } ?>
</div>
</div>
<!-- nav-box -->
<nav class="nav-box">
<!-- nav -->
<?php
wp_nav_menu(array(
'menu' => 'Header Menu',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => 'nav',
'echo' => true,
'fallback_cb' => 'fallback_default_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => '',
'theme_location' => 'header_menu'
));
//the main menu for iPhone version
dropdown_menu( array('dropdown_title' => 'Header Menu', 'indent_string' => ' - ', 'indent_after' => '','container' => '', 'container_class' => '', 'menu_id' => 'mobile-meny', 'theme_location'=>'header_menu') );
?>
</nav>
</header>
nations-styles.css
#charset "utf-8";
/* Nations Styles */
#main .container h1 { margin-bottom:10px;}
#main .container h2 { margin-bottom:10px;}
#main .container h3 { margin-bottom:10px;}
#main .container h4 { margin-bottom:5px;}
#main .container h5 { margin-bottom:5px;}
#main .container h6 { margin-bottom:5px;}
#main .container p { margin-bottom:15px;}
.space { display: block; width:100%; height:15px;}
strong, b { font-weight: bold;}
ul.ulFloatL { overflow: auto;}
ul.ulFloatL li { float: left; width:49.5%; margin-bottom:15px; font-weight:bold; font-size:18px;}
ul.ulFloatL li img { max-width:100%; margin:0;}
.overflowH { overflow:hidden;}
.floatL { float:left;}
.iconLogo { margin: 3px 20px 3px 0;}
.grid-cols .col33 { overflow: auto;}
.imgScale { max-width:100%; width:auto;}
#sidebar .widget ~ .widget { margin-top:20px;}
h2 .divider { margin:0 0 10px; padding:0;}
h2 .divider ~ .divider { padding:13px 0 0; margin-bottom: 25px;}
.btn.red, .tp-caption.slide_button a, .comment-form .submit, .tp-caption.slide_button a.btn { background:#C7362D; border: 1px solid #b7261D !important; color:#FFE6E7; border-radius:5px !important; padding:8px 15px 7px; text-transform: uppercase; font:300 14px/16px 'Oswald',Arial,Helvetica,sans-serif;}
.btn.red:hover, .tp-caption.slide_button a:hover, .comment-form .submit:hover, .tp-caption.slide_button a.btn:hover { background:#b7261D; color:#fff;}
.tp-caption.slide_title { color:#C7362D;}
.comment-form .submit input { opacity:0;}
.fullwidthbanner-container .linklist a { font-size:24px; color:#C7362D; display: block;}
.fullwidthbanner-container .linklist a:hover, .fullwidthbanner-container .linklist a:active, .fullwidthbanner-container .linklist a:focus { color:#333;}
.nav-box #nav .sub-menu { top: 25px;}
.nav-box > ul > li > .has-drop-down-a { background-position: 100% 12px;}
.tp-leftarrow.default, .tp-rightarrow.default { top:50% !important;}
.nocomments { display:none;}
#header { background: #fff url(/wp-content/uploads/2013/10/bodyBg-grey.jpg) top center no-repeat;}
#header .section { padding:10px; border: none;}
.nav-box { padding-top:10px;}
.nav-box > ul > li { padding-bottom:11px;}
.social .twitter {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/twitter-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .facebook {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/facebook-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .rss {background: transparent url("/wp-content/themes/smartbusiness/css/red/images/rss-hover.png") no-repeat scroll 0 0; opacity:0.7;}
.social .facebook:hover, .social .twitter:hover, .social .rss:hover { opacity:1;}
.fullwidthbanner-container { background-color:#eee;}
#sidebar .current-menu-item a { color:#999;}
div.rss-output { padding:0 0 15px;}
footer .blog-links p, footer .news-contents p { line-height:16px;}
footer .news-contents div ~ div p { margin-top:10px;}
footer .news-contents .news { margin-left:0 !important;}
/* Footer Fix */
#footer, .footer-holder, .footer-frame, footer, footer .add-block { display: block !important; width:100%;}
footer .case { margin:0 auto;}
/* Home Slider */
.fullwidthbanner-container { margin-left:-2000px; float:left;}
.fullwidthbanner-container.loaded {margin-left:0; float:none;}
.fullwidthbanner-container.loaded .fullwidthbanner { max-height:300px;}
/* Theme Styles */
/* logo */
.logo { float:left; background: none; width:136px; height:80px; overflow: visible; text-indent: 0;}
html {background:#fff;}
.nav-box > ul, .nav-box > ul ul { font:18px/19px "Oswald", Arial, Helvetica, sans-serif !important; }
.nav-box > ul ul a { font-size: 14px !important; }
.nav-box > ul a { color: #FFE6E7 !important; }
.nav-box > ul a:hover { color: #ffffff !important; }
.nav-box > ul ul a { color: #333333 !important; }
.nav-box > ul ul a:hover { color: #ffffff !important; }
.nav-box {background:#C7362D; border-bottom: 1px solid #dddddd;}
h1, h2, h3, h4, h5, h6 {font-family:Oswald, Arial, Helvetica, sans-serif !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family:Oswald, Arial, Helvetica, sans-serif !important;}
h1, h2, h3, h4, h5, h6 {color:#111111 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#111111 !important;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {color:#b8b8b8 !important;}
#footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a {color:#b8b8b8 !important;}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {color:#ffffff !important;}
#footer h1 a, #footer h2 a, #footer h3 a, #footer h4 a, #footer h5 a, #footer h6 a {color:#ffffff !important;}
body {font-family:Arial, Arial, Helvetica, sans-serif;}
body {font-size:12px;}
body {color:#222222;}
a {color:#C7362D;}
a:hover{color:#001F5B;}
There is a div near the bottom of your page that starts like this:
<div class="select-options options-hidden drop-menu drop-dropdown-menu " style="position: absolute; top: 0px; left: 0px; width: 0px;"></div>
Most likely this is coming in from a menu plugin or your theme.
So in your print stylesheet, add:
.drop-holder{display: none !important; visibility:hidden !important;}
The "!important" will help force the style to take effect.
In the future, a great way to test print styles is using Google Chrome's Developer's Tools.
When viewing page in Chrome, press F12. In the Emulation tab at the bottom, Click Media, check the box next to CSS media, and make sure the dropdown is set to print. Then you can view your page using your print stylesheet.
I'm in the process of transferring an HTML/CSS/jquery mockup of a website into a wordpress theme. The site runs perfectly as an HTML site and all of the css rules are selecting the correct html elements.
However, when I enqueue the scripts to Wordpress and look at the site, only certain rules are being applied, resulting in the website having a broken look. I know the css is being correctly enqueued since I can see it showing up in the page source for the website. When I look at specific elements with web inspector it shows that only certain rules are being implemented but not others. Why would transferring my css to Wordpress change how the css rules apply to almost identical HTML?
Below the code for how I'm enqueuing scripts. Note the dependency on normalize:
<?php
//
function theme_styles() {
wp_enqueue_style( 'normalize', get_template_directory_uri() . '/normalize.css' );
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css', array( 'normalize' ) );
}
// Load the theme JS
function theme_js() {
wp_register_script('stickynav',get_template_directory_uri() . '/js/stickynav.js', array('jquery'), '', true);
wp_register_script('nouislider',get_template_directory_uri() . '/js/nouislider.js', array('jquery'), '', true);
wp_register_script('bootstrap2',get_template_directory_uri() . '/js/bootstrap2.js', array('jquery'), '', true);
wp_register_script('foundation',get_template_directory_uri() . '/js/foundation.js', array('jquery'), '', true);
wp_register_script('orbit',get_template_directory_uri() . '/js/foundation.orbit.js', array('jquery'), '', true);
wp_register_script('modernizr',get_template_directory_uri() . '/js/modernizr.custom.49510.js', array('jquery'), '', true);
wp_enqueue_script('stickynav');
wp_enqueue_script('nouislider');
wp_enqueue_script('bootstrap2');
wp_enqueue_script('modernizr');
wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);
if (is_home() && !is_paged() ) {
wp_enqueue_script('foundation');
wp_enqueue_script('orbit');
}
}
add_action( 'wp_enqueue_scripts', 'theme_js');
add_action('wp_enqueue_scripts','theme_styles');
// Enable custom menus
add_theme_support ('menus');
?>
This is the html/php I have in header.php:
<!DOCTYPE html>
<html>
<head>
<title>
<?php
wp_title( '-', true, 'right' );
bloginfo('name');
?>
</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<?php wp_head(); ?>
</head>
<body>
<div id="header_top_wrapper">
<!-- header and subheader -->
<div class="row" id="header-top">
<div class="large-12 columns" id="my_logo">
<?php bloginfo( 'name'); ?>
</div>
<div class="large-6 columns large-uncentered" id="subheader">
<h4><?php bloginfo( 'description'); ?></h4>
</div>
</div>
<!-- sticky navigation bar -->
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navigation_items">
<li class="nav-left">HOUSEPLANS.INFO</li>
<li class="nav-left">SEARCH PLANS</li>
<li class="nav-left">MOST VIEWED</li>
<li class="nav-right">ABOUT</li>
<li class="nav-right" id="site-search">
<form action="/search" method="get">
<input type="text" name="s" data-provide="typeahead" autocomplete="off" placeholder="Search";>
<i class="icon-search"></i>
</form>
</li>
</div>
</div>
</div>
</div><!-- end #header_top_wrapper -->
As an example of the selective application, these are the rules that are being applied to a link nested inside of an list item li on the HTML mockup
#sticky_navigation ul li a {
float: left;
margin: 0 0 0 5px;
height: 36px;
padding: 0;
line-height: 36px;
font-size: 12px;
font-weight: normal;
color: white;
}
#sticky_navigation ul {
list-style: none;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-style: normal;
}
And this is what is being applied to the same link in the Wordpress version of the same HTML and CSS
a {
color: inherit;
text-decoration: none;
line-height: inherit;
}
li {
text-align: -webkit-match-parent;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
}
Below is the CSS style for the area in question:
/* Logo and subheader */
#my_logo {
font:45px Georgia, Times, serif;
padding-left: 8px;
}
#subheader h4{
margin: 6px 0 0 0;
}
/* our menu styles */
#sticky_navigation_wrapper {
width:100%;
height:36px;
}
#sticky_navigation {
width:100%;
height:36px;
/* background: rgba(65, 105,255,.4); */
background: black;
z-index: 1030;
}
.navigation_items {
width:960px;
margin:0 auto;
}
.navigation_items ul{
padding-left: 0;
}
.navigation_items ul.pull-left:after {
clear: both;
}
#sticky_navigation ul {
list-style:none;
margin: 0;
/* padding:0; */
}
#sticky_navigation ul li{
margin:0;
display:inline-block;
}
#sticky_navigation ul li a{
/* float:left; */
/*margin:0 0 0 5px;*/
height:36px;
/* padding: 0; */
line-height:36px;
font-size:12px;
font-weight:normal;
color:white;
}
.nav-left{
padding-left: 10px;
padding-right: 20px;
}
.nav-right {
float: right !important;
padding-right: 10px;
padding-left: 20px;
}
What is going on here? I've been up all night trying to figure this out.
I'm enqueuing correctly, and according to the page source the exact same css is in the header as in my non-Wordpress version.
You have:
add_action('wp_enqueue_scripts','theme_styles');
But probably you should change it to:
add_action('wp_enqueue_style','theme_styles');
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Change
add_action('wp_enqueue_scripts','theme_styles');
to
add_action('wp_enqueue_style','theme_styles');
Also please remember that if you change or edit the css, you need to delete your cache and your visitors also needs to delete their browser's cache. But of course there's a better way to do it. Just fill in the "version" arguments on the wp_enqueue_style.
Do it like this:
add_action('wp_enqueue_style','theme_styles', array(), '1.0.0');
Every time you edit your css. Just change the version to '1.0.1' or '1.0.2' and so on. This will force your visitor's browser to get the latest version of the css.
Figured it out...
UL tags were missing for the li's - somehow deleted while inserting PHP.
DOH!