I have a problem with my Navbar and logo.
I have modified the Navbar that it is in a fix position on top with 100% width.
I put the logo function also out of the page div so it is above the page in the header area.
The problem is that when I set the nav-bar margin-top to 0 the logo is under the navbar.
When I set the logos margin-top to about 5rem it puts down the nav-bar to the place where the Logo starts.
Here are my codes for better understanding:
Header.php
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="navbar" class="navbar">
<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 -->
</div>
<div id="mainlogo" class="mainlogo">
<?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; ?>
</div id="mainlogo" class="mainlogo">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="slider" class="slider">
<?php layerslider(1) ?>
</div>
</header><!-- #masthead -->
<div id="main" class="wrapper">
Style.css
.header-image {
display: block;
margin-top: 0rem;
margin-left: auto;
margin-right: auto;
}
/* Navigation Menu */
.main-navigation {
margin-top: 0p;
margin-top: 0rem;
position: fixed;
z-index: 999;
opacity:1;
filter:alpha(opacity=100);
width: 100%;
margin-top: 0px;
margin-top: 0rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 28px;
font-size: 1rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #FFF;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
margin-left: 3rem;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
/* Menu Background */
.nav-menu {
background-image: url("img/menu_repeat.png");
padding-left: 0rem;
padding-right: 0rem;
}
.slider {
margin-top: 15px;
margin-top: 1rem;
}
.mainlogo {
margin-top: 50px;
margin-top: 5rem;
}
.navbar {
margin-top: 0px;
margin-top: 0rem;
}
Use absolute positioning. Parent of nav should be relative positioned, and then the absolute positioned nav will be positioned in relation to that parent.
EDIT:
http://jsfiddle.net/y54m874c/
See this fiddle. In there I relatively positioned header class in which I put logo and navigation. Navigation is absolutely positioned in relation to that container. If I put nav > ul relatively positioned, and then put absolute position on li elements, then I could move them around in that unsorted list that contains them. If I removed the relative positioning in the unsorted list, then the list items would look for the next container they're in and watch what is relatively positioned, and use that as a reference.
Relative position by itself doesn't have to mean a thing. You can just say an element has a relative position, and then the inside elements will position according to him, and that element can stay where it is. But, you could also use relative positioning to position an element relative to itself.
Fixed position looks the height and the width of the window browser, and that is the 'reference frame' for it. It will move in relation to it. Static position is the default and it follows the flow of the html elements.
You could also use floats, but then you couldn't position elements to your liking.
The middle ground is to find when it's good for you to use manual positioning, and when to use floats.
Ok i got it.
I set #navbar to fixed and main-menu to fixed too.
seems to work as expectet
Thanks to all.
Related
In my WordPress Website's Themes Area I am getting strange message - "ERROR: The theme defines itself as its parent theme. Please check the Template header."
I Cannot Figure out what is Wrong. Please help me.
The header.php files code is given below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
<link rel="icon" type="image/png" href="<?php bloginfo('stylesheet_directory'); ?>/Images/favicon.gif" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/Font/font-awesome-4.0.3/css/font-awesome.min.css">
</head>
<body class="custom-background">
<div id="wrap">
<div id="header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="fortuneshop9999" />
</a>
</div>
<!--Google Translator-->
<div id="google_translate_element">
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'nl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!--End-->
<div id="nav">
<div>
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => '', 'menu_class' => 'mainMenu' ) );?>
</ul>
</div>
</div>
<div id="subnav">
<ul>
<li class="menu-facebook">
Facebook
</li>
<li class="menu-twitter">
Twitter
</li>
<li class="menu-email">
Email
</li>
<li class="menu-pinterest">
Pinterest
</li>
</ul>
<form class="search" method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" placeholder="Search here"/>
<input type="submit" id="submit" value=""/>
</form>
</div>
The style.css code is:
/*
Theme Name: Yogi7
Theme URI: http://www.myotcworld.com/website-package.aspx
Author: Yogi
Author URI: http://www.myotcworld.com/website-package.aspx
Template: yogi7
Version: 1.0.0
*/
body.custom-background {
background-attachment: scroll;
background: url("Images/seamless-stone-background.jpg" ); /*background:#FDE6E0;*/
background-position: left top;
background-repeat: repeat;
}
body {
background: none repeat scroll 0 0 #FFFFFF;
color: #4A4A4A;
font-family: "Times New Roman",Times,serif;
font-size: 14px;
margin: 0 auto 30px;
padding: 0;
}
#header {
width: 960px;
height: 285px;
background: url("Images/header.png") no-repeat;
}
....
I removed the Template: yogi7 from the top of my styles.css file of the theme. And this solved the problem.
This is how the styles.css look now.
/*
Theme Name: Yogi7
Theme URI: http://www.myotcworld.com/website-package.aspx
Author: Yogi
Author URI: http://www.myotcworld.com/website-package.aspx
Version: 1.0.0
*/
body.custom-background {
background-attachment: scroll;
background: url("Images/seamless-stone-background.jpg" ); /*background:#FDE6E0;*/
background-position: left top;
background-repeat: repeat;
}
body {
background: none repeat scroll 0 0 #FFFFFF;
color: #4A4A4A;
font-family: "Times New Roman",Times,serif;
font-size: 14px;
margin: 0 auto 30px;
padding: 0;
}
......
Hope this helps others.
/*
Theme Name: Yogi7 Child
Theme URI: http://www.myotcworld.com/website-package.aspx
Description: Yogi Child Theme
Author: Yogi
Author URI: http://example.com
Template: <REPLACE WITH YOUR DIRECTORY NAME OF THE PARENT THEME>
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yogi-child
*/
The Template line corresponds to the directory name of the parent theme. The parent theme in example case is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.
Note: Replace Template with your directory name of the parent theme.
More you can read form official docs Codex Wordpress.
You need to check on style.css file there its defined if a theme is going to be parent or child theme,
/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/
see if theme name and template once check!
I want to place my footer at the bottom of the screen, have used a div with the "wrap" id on the body of my index, but the footer does not seem to stick below it.
Please help me with this issue.
I have included my index.php, footer.php and css.php files
index.php
<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page['title'].' | '.$site_title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
</head>
<body>
<div id="wrap">
<?php include(D_TEMPLATE.'/navigation.php'); ?>
<div class="container">
<h1><?php echo $page['header'];?></h1>
<?php echo $page['body_formatted']; ?>
</div>
</div><!-- END wrap -->
<?php include(D_TEMPLATE.'/footer.php'); ?>
<div id="console-debug">
<pre>
<?php print_r($page); ?>
</pre>
</div>
</body>
</html>
footer.php
<footer id="footer">
<div class="container">
<p>This is my footer</p>
</div>
</footer><!-- END footer -->
css.php
<?php
//CSS:
?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
html,
body {
height=100%;
/* The html and body elements cannot have any padding or margin */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
width:100%;
height: 60px;
background-color: #f5f5f5;
}
#btn-debug {
position: absolute;
}
#console-debug{
position:absolute
}
</style>
For sticky footer you can just add this code
#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}
You should try to set your position:fixed
So it won't move
Here is a codepen to see the code I have written and works.
When I write similar code in my wordpress theme, my body appears above the header. How can I get the body next to the header?
[BONUS] What is the best way/how to align the body centered between the right-edge of the header and the right side of the screen.
Any advice is highly appreciated, and I thank you in advance.
[EDIT]: I changed my code for my wordpress site because before I was targeting body with css like I did in my codepen, but instead I created a div with class .site and am using that as the body. This is a temporary fix, but it is working as intended. How could I better achieve this affect so I can integrate visual plugin builders such as beaver builder?
HTML:
<div id="header">
<img src="http://placehold.it/100x100">
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item Number 3</li>
<li>Item #4</li>
</ul>
</div>
<div id="body">
<div id="container">Body
</div>
</div>
</div>
CSS:
#header,
#body {
display: inline-block;
}
#header {
white-space: nowrap;
width: 15%;
height: 100%;
float: left;
text-align: right;
position: fixed;
//border: 1px solid green;
}
#header img {
}
#nav ul {
list-style: none;
}
#nav {
position: absolute;
bottom: 4%;
right: 0;
}
#body {
width: 80%;
float: right;
//border: 1px solid yellow;
}
#container {
height: 10000px;
}
HEADER.PHP:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" />
<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(); ?>>
<!-- Site Header -->
<header class="site-header">
<?php the_custom_logo(); ?>
<?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?>
</header>
<!-- /Site Header -->
<!-- Site Content -->
Part of the problem was that I had a php error in my functions.php. Also I changed the position of the site content to absolute and the site nav to fixed. I then set the width of the sidebar nav and site content. I also added a content loop to my header to create the content area. Both site nav and content are displayed inline-block.
Everything now seems to be working.
my site is on WP and I using Hueman theme.
I want to add baner in right side of header. Now Im using header image, which have max. width and I dont know if I should add my banner on this header image or cut width header image and add banner next to it.
I searched a lot and I found a solution:
https://wordpress.org/support/topic/ads-11?replies=6#post-4906945
I have no idea where I can put divs with my banner, this is how looks header.php
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="header">
<?php if ( has_nav_menu('topbar') ): ?>
<nav class="nav-container group" id="nav-topbar">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
<div class="container">
<div class="container-inner">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
<div class="search-expand-inner">
<?php get_search_form(); ?>
</div>
</div>
</div><!--/.container-inner-->
</div><!--/.container-->
</nav><!--/#nav-topbar-->
<?php endif; ?>
<div class="container group">
<div class="container-inner">
<?php if (ot_get_option('header-image') == ''): ?>
<div class="group pad">
<?php echo alx_site_title(); ?>
<?php if (ot_get_option('site-description') != 'off'): ?><p class="site-description"><?php bloginfo('description'); ?></p><?php endif; ?>
</div>
<?php endif; ?>
<?php if (ot_get_option('header-image')): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php if (has_nav_menu('header')): ?>
<nav class="nav-container group" id="nav-header">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
</nav><!--/#nav-header-->
<?php endif; ?>
</div><!--/.container-inner-->
</div><!--/.container-->
</header><!--/#header-->
<div class="container" id="page">
<div class="container-inner">
<div class="main">
<div class="main-inner group">
And this is my custom.css edited by me to hide this banner from mobile users
/*
Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking.
When you update your theme, backup this file and re-add it after.
*/
/* Global */
.mystyle {}
.ads-header-desktop {
display: block;
float: right;
margin-right: 5px;
margin-top: -95px;
}
/* hide or display */
.ads-header-desktop { display: block; }
#media only screen and (max-width: 800px) {
.ads-header-desktop { display: none; }
}
/* Tablet - 800px, 768px & 720px */
#media only screen and (min-width: 720px) and (max-width: 800px) {
.mystyle {}
}
/* Mobile - 480px & 320px */
#media only screen and (max-width: 719px) {
.mystyle {}
}
/* Mobile - 320px */
#media only screen and (max-width: 479px) {
.mystyle {}
}
Summa summarum:
This is my site: www.st-mobilny.pl and I want to do something like that: 1drv.ms/1RoUkIV
Your best bet is to add it with position absolute:
<div class="container-inner">
<div class="banner"><img src="path/to/image" alt=""></div>
<?php if (ot_get_option('header-image') == ''): ?>
In your CSS:
.container-inner {
position: relative;
}
.banner {
position: absolute;
top: 50px;
right: 0px;
z-index: 100;
}
#media screen and (max-width: 768px) { .banner { position: static;} }
Change the top and right to whatever you want. I added a sample media query to show how you could change it, so once you go into mobile, the banner goes above the logo. If you want the banner below the logo, move the div in the html to above the menu.
Excuse my ignorance, I am very new to the web scene. I am missing a sidebar and footer on my custom theme. I was able to get the background images to appear for the header and content, but not for the footer and sidebar. I have followed several tutorials, researched to both ends of the internet and cannot figure out what I am doing wrong.
I am attempting to create a layout that consists of a header, content and right sidebar. I really don't want anything in my side bar from WordPress. I am going to put the site navigation and login there, but I would like the background to show up! I will post the basic code below and give the link to my site here. Thanks in advance!
index.php
<div id="container">
<div id="content" role="main">
<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta 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', 'twentyten' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url');?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
.......
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
sidebar.php
<div id= "sidebar" class="widget-area" role="complementary">
</div><!-- #sidebar -->
footer.php
</div><!-- #main -->
<div id="footer" role="contentinfo">
</div><!-- #footer -->
</div><!-- #wrapper -->
<?php wp_footer(); ?>
</body>
</html>
style.css
/*
Theme Name: Mod Theme
Theme URI: http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/
Description: My First Theme
Version: 1.0
Author: Jason
Author URl: http://www.itssimplydesign.com
*/
/* =Layout
-------------------------------------------------------------- */
/*
LAYOUT: Header, Content and Sidebar
DESCRIPTION:
*/
body {
background-color: #e6e9Df;
}
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
#header {
background: url(http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/images/background_main_01.png) no-repeat;
width: 1000px;
height: 332px;
}
#sidebar {
background: url(http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/images/background_main_03.png) no-repeat;
float: right;
clear: right;
overflow: hidden;
width: 300px;
}
#content {
background: url(http://www.itssimplydesign.com/wordpress/wp-content/themes/mod_theme/images /background_main_02.png) no-repeat;
min-height: 668px;
width: 700px;
float: left;
}
#footer {
clear: both;
width: 100%;
}
You have applied background on the content but nothing is there for the footer.
You can either change to styling of the footer in your css, or you can put
<div id="footer" role="contentinfo">
</div>
in #container too. Then, it would all be included in the same div and the background would apply too.
Similarly, you can include the sidebar like that, in the container only.