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.
Related
I have a navbar which is dynamic. I want to display the data on same page when user click on link. I am using $_REQUEST. Code is working fine but when I run the script it gives an error that 'undefined index val'... but when user click on a link it works fine. I want to remove that error.
<html>
<head>
<style>
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
margin-top: 150px;
font-family: 'Russo One', sans-serif;
}
h1 span {
color: #FF4649;
}
#container {
margin: 0 auto;
}
nav {
margin: 35px 0;
background-color: #FF4649;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #FF4649;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #333;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
width:230px;
float:none;
display:list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top:-60px;
left:230px;
}
nav ul ul li {
border: 1px solid white;
}
//li > a:after { content: ' ▼'; }
//li > a:only-child:after { content: ''; }
</style>
</head>
<body>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS DropDown Menu</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
$con=mysqli_connect("localhost","root","","links");
if(!$con){
echo "error occured";
}
$query="SELECT * FROM cat";
$result=mysqli_query($con,$query);
?>
<div id="container">
<nav>
<ul>
<?php
while($row=mysqli_fetch_array($result)){
$fn_id=$row['id'];
$sub_query="SELECT * FROM subcat WHERE catid=".$fn_id;
$sub_result=mysqli_query($con,$sub_query);
?>
<li><?php echo $row['name'];?>
<ul>
<?php
while($sub_row=mysqli_fetch_array($sub_result)){
?>
<li> <?php echo $sub_row['anme'];?></li>
<?php
}
?>
</ul>
<?php
}
?>
</li>
</ul>
</nav>
<h1>Simple <span>CSS</span> DropDown Menu</h1>
</div>
<?php
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result)){
?>
<p><?php echo $row['Name'];?></p>
<?php
}
?>
</body>
</html>
</body>
</html>
Change
$query='SELECT * FROM data WHERE subcat='.$_REQUEST['val'];
Into
$query='SELECT * FROM data WHERE subcat='.!empty($_REQUEST['val']) ? $_REQUEST['val'] : '');
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;
}
}
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 was wondering how I can achieve an effect similar to this website. When you scroll down the site the logo disappears but the menu remains fixed:
http://www.nowness.com/
This is my site: http://www.itsalifestylething.co.uk/quick-cupcake-catch-up/
PHP
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><img src="http://www.itsalifestylething.co.uk/wp-content/uploads/2013/11/logo-large.png" /></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
CSS
/* Header
------------------------------------------------------------ */
.site-header {
padding: 5px 0 !important;
}
hgroup {
width: 100%;
}
#masthead {
width: 960px;
margin: 0 auto;
position: relative;
}
h1.site-title {
margin: 0 auto;
width: 480px;
height: 123px;
}
.social img {
margin-right: 15px;
}
/* Nav
------------------------------------------------------------ */
.main-navigation {
width: 100%;
margin: 0px !important;
}
.main-navigation div.nav-menu > ul {
border: 0px !important;
margin: 0 auto;
width: 430px;
}
.main-navigation li {
margin: 0 25px 0 0;
}
.main-navigation li ul {
padding-top: 2px;
z-index: 10;
}
.main-navigation li a:hover, .main-navigation .current_page_item > a {
color: #33d898;
font-weight: normal;
}
.main-navigation li ul {
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
width: 200px;
}
.main-navigation li ul li a {
background: #ffffff;
border-bottom: 1px solid #e7e7e7
}
.main-navigation li ul li a:hover {
background: #ffffff;
color: #33d898;
}
.nav-menu {
border-bottom: 1px solid #e7e7e7;
}
This is how I would go about it with html, css, and jQuery.
First this is how I would order my html,
<nav>
<span class="logo">Your Logo</span>
<ul>
<li id="logo">Your Logo</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
Next the css,
html, body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav {
width: 80%;
background: #c1c1c1;
position: fixed;
top: 0;
left: 50%;
margin-left: -40%;
}
nav li {
display: inline-block;
cursor: pointer;
}
#logo {
display: none;
}
#logo.scroll {
display: inline-block;
}
.logo {
font-size: 50px;
font-family: "century gothic";
}
and finally the little bit of jQuery,
$(window).scroll(function() {
$('.logo').hide();
$('#logo').addClass('scroll');
if ($(window).scrollTop() === 0) {
$('.logo').show();
$('#logo').removeClass('scroll');
}
});
Here is a jsfiddle, Link.
You have to use javascript to add a position: fixed to your header. Also you need to give your body an offset.
nav-menu-static {
position: fixed;
top: 0;
background: #fff;
width:960px
}
#masthead {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
position: fixed;
width: 960px;
}
Then set the margin-top for the .site-content class
I am having trouble aligning my logo on a page I am making in WordPress.
I would like the logo to be of the same height as the store hours that are on the right, and aligned to the left border of the ribbon.
Here is my relevant PHP code:
<!-- Favicon -->
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<?php
$g = of_get_option('google_analytics', '' );
if (!empty($g)){
?>
<script type="text/javascript"><?php echo $g; ?></script>
<?php } ?>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="row">
<div class="span7 logo">
<?php $image1 = of_get_option('logo', '' );
if($image1 != "") : ?>
<h1 id="logo"><img src="<?php echo $image1; ?>" alt=""/></h1>
<?php endif;?>
</div><!--end logo-->
<div class="span5 open-hours">
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('OpenHours') ) : ?>
<?php endif; ?>
</div><!--end open-hours-->
Below is my relevant CSS code:
#import "css/shortcodes.css";
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;padding-bottom:10px;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:25px;}
div { position:relative }
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}
div,img{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
/**** GENERAL STYLES*****/
html{-webkit-font-smoothing:antialiased;}
.wrap,.wrap-slider, .wrap-header, .wrap-content,.top-img,#footer{width:980px;margin:0 auto;}
.wrap-content{ background:#fff;padding:20px 0;}
.wrap-slider, .wrap-header{background:#fff;margin-bottom: 20px;}
.wrap-header{margin-top:20px;padding:20px 0;}
.wrapper_food ul{margin-bottom:10px;}
.wrapper_food ul li, .circle li{ background: url("images/circle.png") no-repeat scroll 0 9px transparent;padding: 3px 0 3px 15px;}
h1{font-size: 42px; line-height:42px;}
h2{font-size:36px;line-height:36px;}
h3{font-size:30px;line-height:30px;}
h4{font-size:24px;line-height:24px;}
h5{font-size:18px;line-height:18px;}
h6{font-size:12px;line-height:12px;}
h1, h2{margin-bottom:12px;}
h3, h4, h5, h6{margin-bottom:6px;}
p{margin-bottom:18px;}
.column-clear{clear:both;}
.clear{overflow: hidden;}
/**** END GENERAL STYLES*****/
/**** HEADER STYLES*****/
.open-hours{margin-top:30px;margin-bottom:30px;font-family: 'Merienda One', cursive;padding-left:130px;}
.open-title{font-size:18px;margin-bottom:6px;padding:0;}
.open-day{margin-bottom:6px;}
#menu-holder{margin:0px auto;width:1000px;height:61px;z-index:999;}
.menu{margin: 0px auto;width: 1000px;height: 61px;z-index:999;position:absolute;}
.menu li {padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: 'Oswald', sans-serif;font-size:18px;line-height:1;}
.menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0 1px 0 rgba(30, 30, 30, 0.6);}
.menu ul { background: #ffffff; display: none; margin: 0; padding: 0; width: 180px; position: absolute; top: 61px; left: 0px;}
.menu ul li {display:block; float: none; margin: 0px 10px; padding:10px 0px;border-bottom:1px solid #f0f0f0;background:none;}
.menu ul li:last-child{border:none;}
.menu ul li:hover a, .menu li:hover li a, .menu ul li.sfHover a, .menu li.sfHover li a { background:none;color:#d5d5d5;border:none;}
.menu li:hover li:hover a, .menu li.sfHover li.sfHover a{color:#353535;}
.menu li:hover > ul, .menu li.sfHover > ul { display: block;}
.menu ul a{font-size: 13px; padding:0px;text-transform:uppercase;width:180px;display:block;height:auto;text-shadow:none;}
.menu ul ul { left: 190px; top:5px; }
.menu .sub-menu li.current_page_item a { color: #353535; }
.mobile-navigation {
background-color: #F8F8F8;
color: #8F8F8F;
display: inline-block;
font-size: 12px;
height: 30px;
line-height: 1.5;
padding: 5px 10px;
width: 100%;
display:none;
}
/**** END HEADER STYLES*****/
Can anyone see what is the relevant code I need to modify in order to adjust the position and size of the logo?
You need to remove margin-top: 30px from open-hours. Or alternatively add the same margin for your logo.
This was easy to see using Chrome developer tools. If you are unfamiliar, in Chrome try view > developer > developer tools. Then in the bottom left corner, click on the magnifying glass icon. Then you can click on the opening hours and on the logo and see from "computed style" on the right that their upper margins are different.