I'm trying to add some contact details to the right of the logo on this site.
At the moment it is displaying beneath the logo. I'd also like to change the font and colour to match the nav bar.
Here's the code for the header.php to show what I did to the site.
I'm also aware that Laura (the owner) should be using a child theme but her husband built the site and has already done a lot of work without a child so building one for this one change seems redundant?
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js" >
<!-- start -->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telephone=no">
<!-- set faviocn-->
<?php
global $pmc_data;
$favicon = '';
if(isset($pmc_data['favicon']))
$favicon = $pmc_data['favicon'];
if (empty($favicon)) { $favicon = get_template_directory_uri() .'/images/favicon.ico'; }
?>
<!-- set title of the page -->
<title>
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( 'Page %s' , max( $paged, $page ) );
?>
</title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link id="favicon" rel="icon" type="image/png" href="<?php echo $pmc_data['favicon'] ?>">
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) {wp_enqueue_script( 'comment-reply' ); }?>
<!-- add google analytics code -->
<?php
if(isset($pmc_data['google_analytics']))
echo pmc_stripText($pmc_data['google_analytics']);
?>
<?php wp_head();?>
</head>
<!-- start body -->
<body <?php body_class(); ?>>
<!-- start header -->
<header>
<div id="headerwrap" >
<!-- fixed menu -->
<div class="pagenav fixedmenu">
<div class="holder-fixedmenu">
<div class="logo-fixedmenu">
<?php $logo = $pmc_data['logo']; ?>
<img src="<?php if ($logo != '') {?><?php echo $logo; ?><?php } else {?><?php get_template_directory_uri(); ?>/images/logo.png<?php }?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description') ?>" >
</div>
<div class="menu-fixedmenu">
<?php
if ( has_nav_menu( 'scroll_menu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-scroll',
'theme_location' => 'scroll_menu',
'echo' => true,
'fallback_cb' => 'ideo_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new description_walker())
);
}
?>
</div>
<!-- respoonsive menu for scrool bar -->
</div>
</div>
<!-- top bar -->
<div class="TopHolder">
<?php pmc_showTop() ?>
</div>
<!-- logo and main menu -->
<div id="header">
<div class = "header-inner">
<div class="header-social">
<?php pmc_socialLink() ?>
</div>
<div id="logo">
<?php $logo = $pmc_data['logo']; ?>
<img src="<?php if ($logo != '') {?><?php echo $logo; ?><?php } else {?><?php get_template_directory_uri(); ?>/images/logo.png<?php }?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description') ?>" />
<div id="contact">
<p>07939598489</p> <p>laura#bristolbridalboutique.co.uk</p>
</div>
</div>
<!-- respoonsive menu main-->
<div class="respMenu noscroll">
<div class="resp_menu_button"><i class="fa fa-list fa-2x"></i> Menu</div>
<?php
if ( has_nav_menu( 'resp_menu' ) ) {
$menuParameters = array(
'theme_location' => 'resp_menu',
'walker' => new Walker_Responsive_Menu(),
'echo' => false,
'items_wrap' => '<div class="event-type-selector-dropdown">%3$s</div>',
);
echo strip_tags(wp_nav_menu( $menuParameters ), '<a>,<br>,<div>,<i>' );
}?>
</div>
<!-- main menu -->
<div class="pagenav">
<?php
if ( has_nav_menu( 'main-menu' ) ) {
wp_nav_menu( array(
'container' =>false,
'container_class' => 'menu-header',
'theme_location' => 'main-menu',
'echo' => true,
'fallback_cb' => 'ideo_fallback_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new description_walker())
);
}
?>
</div>
</div>
</div>
</header>
To get it on the right side you can use
#contact{ float:right;}
and to align it with the rest you can add
margin-top:54px;
for the font/color you can add
font-family: "brioche-italic", georgia, "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif !important;
font-size: 17px;
color: #94bfba !important;
Related
I am having difficulty to make my hamburger menu to display a full width and height on toggle button click. I am trying to create a hamburger with small icons positioned left of the screen which when clicked displays a full width and height (transparent) and position the navitems horizontally.
The image of the Hamburger Menu. I only want the icon (the one with white border) displayed without container.
When this icon is clicked, it displays
I don't want to display something like this, I want a full width and height with navitems displayed horizontally, also with respective icons. As follow;
Header.php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
$container = get_theme_mod( 'understrap_container_type' );
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'wp_body_open' ); ?>
<div class="site" id="page">
<!-- ******************* The Navbar Area ******************* -->
<div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite">
<a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
<nav class="navbar navbar-dark bg-primary">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
</nav><!-- .site-navigation -->
<nav>
<!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?><!-- end custom logo -->
</nav>
</div>
I just want to know which of the classes or ids that need to be tweaked. As I have tried everything possible, it is worsening the situation for me.
'menu_class' => 'navbar-nav ml-auto',
Try to change this class to container to get full width
I need to make iframe url, for example:
https://url.com/category/{category_name)/t=desktop || /t=mobile.
I'm using MAMP to run my local dev env and i got it working like it should be, when query string is equal to desktop it shows 3 posts and when mobile then only one post. Now the issue is following, when sysadmin is updating pre-live env he can see from logs this error:
[Wed Nov 15 20:09:42.122140 2017] [:error] [pid 7776] [client 10.1.2.66:41696] PHP Parse error: syntax error, unexpected end of file, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF) in /var/lib/wordpress/wp-content/themes/wpTheme2/single_iframe.php on line 234
single-iframe.php full code: https://pastebin.com/MBC6thDW
When i'm trying to go test url i'm either getting Error 500 or header with query function just printed out.
I'm using PhpStorm IDE and it doesn't show any errors in my code, what i'm missing here?
It is because of shorttags.
In your localhost environment using "< ?" is enabled, in your development server it is not enabled. That is the only reason.
http://php.net/manual/en/language.basic-syntax.phptags.php
So, just replace "< ?" with "< ?php", and it will work ok.
Try this code
https://pastebin.com/7ubTY2A4
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php
if(get_field('fav_icon', 'option') != ''){
$favId = get_field('fav_icon', 'option');
$favDetails = wp_get_attachment_image_src($favId, 'full');
}
?>
<?php if(!empty($favDetails)): ?>
<link rel="shortcut icon" href="<?php echo $favDetails[0]; ?>">
<?php endif;?>
<title><?php wp_title();?></title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<link rel="stylesheet" type="text/css" href="iframe.css" />
<![endif]-->
<?php
if(is_front_page()){
$info = get_bloginfo('description');
echo '<meta name="og:description" content="'.$info.'">';
echo '<meta name="og:title" content="Website">';
}
?>
<style>
.main-header--frame {
background-color: #a40057;
margin-bottom: -40px;
}
.main-header--frame .categoryTitle {
display: inline-block;
padding-top: 19px;
padding-left: 10px;
color: #ffffff;
}
.main-header.main-header--frame .container {
max-width: 1200px;
background-color: transparent;
}
</style>
</head>
<body>
<header class="main-header main-header--frame">
<nav>
<div class="container">
<div class="navbar-header">
<a href="https://stiil.ee" class="navbar-brand">
<img src="logo" alt="logo"
class="img-responsive">
</a>
<h1 class="categoryTitle">Description</h1>
</div>
</div>
</nav>
</header>
<main class="main-content main-content-inner valitud-content-inner">
<div class="container">
<?php
$queried_object = get_queried_object();
$taxChilds = get_terms( array(
'taxonomy' => 'category',
'hide_empty' => true,
'child_of' => $queried_object->term_id
) ); ?>
<?php if(isset($_GET) && $_GET['t'] == 'desktop'): ?>
<div class="category-wrap">
<?php
$queried_object = get_queried_object();
$count =0;
foreach($taxChilds as $taxChild): ?>
<?php
$args = array(
'post_type'=> 'post',
'cat' => $taxChild->slug,
'posts_per_page' => '1',
'orderby' => 'rand',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'term_id',
'hide_empty' => false,
'terms' => $taxChild->term_id,
),
)
);
query_posts($args); if(have_posts()):
while(have_posts()): the_post(); ?>
<div class="col-md-4 all itemz <?php echo $taxChild->slug; ?>" data-cat="<?php echo $taxChild->slug; ?>">
<div class="item-wrap">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('size-370x416');
$sponsored = get_field('is_sponsored_content');
if($sponsored){
echo '<div class="sponsored-text">Ad</div>';
};
?></a>
<div class="overlay">
<div class="notify">
<img src="<?php echo get_post_cat_img_src();?>" alt="">
</div>
<h2 class="categoryTitle"><?php the_title(); ?></h2>
</div>
</div>
</div>
<?php endwhile;
endif; wp_reset_query();?>
<?php
if ($count == 2) {
break;
}
?>
<?php $count++; endforeach;?>
</div>
<?php endif; ?>
<?php if(isset($_GET) && $_GET['t'] == 'mobile'): ?>
<div class="category-wrap">
<?php
$queried_object = get_queried_object();
$count =0; foreach($taxChilds as $taxChild): ?>
<?php
$args = array(
'post_type'=> 'post',
'cat' => $taxChild->slug,
'posts_per_page' => '1',
'orderby' => 'rand',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'term_id',
'hide_empty' => false,
'terms' => $taxChild->term_id,
),
)
);
query_posts($args);
if(have_posts()):
while(have_posts()): the_post(); ?>
<div class="col-md-4 all itemz <?php echo $taxChild->slug; ?>" data-cat="<?php echo $taxChild->slug; ?>">
<div class="item-wrap">
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('size-370x416');
$sponsored = get_field('is_sponsored_content');
if($sponsored){
echo '<div class="sponsored-text">SISUTURUNDUS</div>';
};
?></a>
<div class="overlay">
<div class="notify">
<img src="<?php echo get_post_cat_img_src();?>" alt="">
</div>
<h2 class="categoryTitle"><?php the_title(); ?></h2>
</div>
</div>
</div>
<?php endwhile;
endif; wp_reset_query();?>
<?php
if ($count == 0) {
break;
}
?>
<?php $count++; endforeach;?>
</div>
<?php endif; ?>
</div>
</main>
</body>
<!--main-content ends-->
<?php wp_footer(); ?>
I have an Index.php file that I need to use as a custom page that I would like to have use some of the themes styles and elements Navigation, Footer, Contact Form, ETC.... The default header seems to be calling the body and its very difficult to find the parts of the header. I have been making a considerable amount of changes so the file in drive should be kept updated until I get this resolved.
Currently I have the page/code working thanks to #David and the advice given in this question:
run php application within wordpress
(links and files removed for privacy, and search engine listings removal)
there was a few files missing so I cant test this template itself.
But it is simply a case of replacing php code that calls for a variable with actual output (from view source) to create the template you want.
Go back to using the default index.php (remove the header/footer calls).
Create a new template with the code below and link to it (using the rewrite code from the previous Q you linked above)
There is quite a bit of code in the header.php that calls variables set from the db but hopefully the below code will remove the parallex classes, if not copy the header file and call it header-custom.php. You can replace get_header('custom') to call this header instead. Anywhere you see a php tag inside a html element tag, replace with the actual output you can see in view source.
<?php
/**
* The template for displaying 404 pages (Not Found).
*
* #package unitedthemes
*/
get_header();
?>
<div class="grid-container">
<div id="primary" class="grid-parent grid-100 tablet-grid-100 mobile-grid-100">
<div class="grid-70 prefix-15 mobile-grid-100 tablet-grid-100">
<header class="page-header fullwidth ut-header-light">
<h1 class="page-title"><span><?php _e('RepairStatus'); ?></span></h1>
</header>
<?php require_once get_stylesheet_directory().'/repairstatus/index.php'?>
</div><!-- .page-header -->
</div><!-- .grid-100 mobile-grid-100 tablet-grid-100 -->
</div><!-- .grid-container -->
<?php get_footer(); ?>
header-custom.php contents (call using get_header('custom'); )
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<?php ut_meta_hook(); //action hook, see inc/ut-theme-hooks.php ?>
<?php if ( defined('WPSEO_VERSION') ) : ?>
<!-- Title -->
<title><?php wp_title(); ?></title>
<?php else : ?>
<?php ut_meta_theme_hook(); ?>
<?php endif; ?>
<!-- RSS & Pingbacks -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11">
<!-- Favicon -->
<?php if( ot_get_option( 'ut_favicon' ) ) : ?>
<?php
/* get icon info */
$favicon = ot_get_option( 'ut_favicon' );
$favicon_info = pathinfo( $favicon );
$type = NULL;
if( isset($favicon_info['extension']) && $favicon_info['extension'] == 'png' ) {
$type = 'type="image/png"';
}
if( isset($favicon_info['extension']) && $favicon_info['extension'] == 'ico' ) {
$type = 'type="image/x-icon"';
}
if( isset($favicon_info['extension']) && $favicon_info['extension'] == 'gif' ) {
$type = 'type="image/gif"';
}
?>
<link rel="shortcut icon" href="<?php echo $favicon; ?>" <?php echo $type; ?> />
<link rel="icon" href="<?php echo $favicon; ?>" <?php echo $type; ?> />
<?php endif; ?>
<!-- Apple Touch Icons -->
<?php if( ot_get_option( 'ut_apple_touch_icon_iphone' ) ) :?>
<link rel="apple-touch-icon" href="<?php echo ot_get_option( 'ut_apple_touch_icon_iphone' ); ?>">
<?php endif; ?>
<?php if( ot_get_option( 'ut_apple_touch_icon_ipad' ) ) : ?>
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo ot_get_option( 'ut_apple_touch_icon_ipad' ); ?>" />
<?php endif; ?>
<?php if( ot_get_option( 'ut_apple_touch_icon_iphone_retina' ) ) : ?>
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo ot_get_option( 'ut_apple_touch_icon_iphone_retina' ); ?>" />
<?php endif; ?>
<?php if( ot_get_option( 'ut_apple_touch_icon_ipad_retina' ) ) :?>
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo ot_get_option( 'ut_apple_touch_icon_ipad_retina' ); ?>" />
<?php endif; ?>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<?php
/*
|--------------------------------------------------------------------------
| Needed Settings
|--------------------------------------------------------------------------
*/
$scrollto = ot_get_option('ut_scrollto_effect');
$scrollto = !empty( $scrollto['easing'] ) ? $scrollto['easing'] : 'linear' ;
$scrollspeed = ot_get_option('ut_scrollto_speed' , '650');
$ut_site_border_body_class = ot_get_option( 'ut_site_border', 'hide' ) == 'show' ? 'ut-site-border' : '';
$ut_site_top_header_body_class = ot_get_option( 'ut_top_header', 'hide' ) == 'show' ? 'ut-has-top-header' : '';
$ut_site_border_header_class = ot_get_option( 'ut_site_border', 'hide' ) == 'show' ? 'bordered-navigation' : '';
$ut_top_header_class = ot_get_option( 'ut_top_header' , 'hide' ) == 'show' ? 'bordered-top' : '';
?>
<body id="ut-sitebody" class="error404 " data-scrolleffect="easeInOutExpo" data-scrollspeed="1300">
<a class="ut-offset-anchor" id="top" style="top:0px !important;"></a>
<?php
/*
|--------------------------------------------------------------------------
| Pre Loader Overlay
|--------------------------------------------------------------------------
*/
if( ot_get_option('ut_use_image_loader') == 'on' ) :
if( ut_dynamic_conditional('ut_use_image_loader_on') ) : ?>
<div class="ut-loader-overlay"></div>
<?php endif; ?>
<?php endif; ?>
<?php ut_before_header_hook(); // action hook, see inc/ut-theme-hooks.php ?>
<?php
/*
|--------------------------------------------------------------------------
| Navigation Setting
|--------------------------------------------------------------------------
*/
/* skin */
$ut_navigation_skin = ot_get_option('ut_navigation_skin' , 'ut-header-light');
/* visibility */
$headerstate = NULL;
if( is_home() || is_front_page() || is_singular('portfolio') || get_post_meta( get_the_ID() , 'ut_activate_page_hero' , true ) == 'on' ) {
if( ot_get_option('ut_navigation_state' , 'off') == 'off' ) {
$headerstate = 'ha-header-hide';
}
}
/* width */
$navigation_width = ot_get_option('ut_navigation_width' , 'centered');
$logo_push = ( $navigation_width == 'fullwidth' ) ? 'push-5' : '';
$navigation_pull = ( $navigation_width == 'fullwidth' ) ? 'pull-5' : '';
/* main navigation settings*/
$mainmenu = array('echo' => false,
'container' => 'nav',
'container_id' => 'navigation',
'fallback_cb' => 'ut_default_menu',
'container_class' => 'grid-80 hide-on-tablet hide-on-mobile ' . $navigation_pull ,
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'theme_location' => 'primary',
'walker' => new ut_menu_walker()
);
/* mobile navigation settings */
$mobilemenu = array('echo' => false,
'container' => 'nav',
'container_id' => 'ut-mobile-nav',
'menu_id' => 'ut-mobile-menu',
'menu_class' => 'ut-mobile-menu',
'fallback_cb' => 'ut_default_menu',
'container_class' => 'ut-mobile-menu mobile-grid-100 tablet-grid-100 hide-on-desktop',
'items_wrap' => '<div class="ut-scroll-pane"><ul id="%1$s" class="%2$s">%3$s</ul></div>',
'theme_location' => 'primary',
'walker' => new ut_menu_walker()
);
/* check if current page has an option tp show a hero */
//$ut_activate_page_hero = get_post_meta( get_the_ID() , 'ut_activate_page_hero' , true );
$ut_activate_page_hero= false // --------------------------------------------------------------------------------------------------------------------------------------------------not sure what this returns....
?>
<!-- commented out ----------------------------------------------------->
<?php // get_template_part( 'partials/top', 'header' ); ?>
<!-- header section -->
<header id="header-section" class="ha-header fullwidth ut-header-light ">
<?php if( $navigation_width == 'centered' ) :?>
<div class="grid-container">
<?php endif; ?>
<div class="ha-header-perspective">
<div class="ha-header-front">
<div class="grid-20 tablet-grid-50 mobile-grid-50 <?php echo $logo_push; ?>">
<?php if ( get_theme_mod( 'ut_site_logo' ) ) : ?>
<?php
$sitelogo = !is_front_page() && !is_home() && ( $ut_activate_page_hero == 'off' || empty($ut_activate_page_hero) ) ? get_theme_mod( 'ut_site_logo_alt' ) : get_theme_mod( 'ut_site_logo' );
$alternate_logo = get_theme_mod( 'ut_site_logo_alt' ) ? get_theme_mod( 'ut_site_logo_alt' ) : get_theme_mod( 'ut_site_logo' ) ;?>
<div class="site-logo">
<img data-altlogo="<?php echo $alternate_logo; ?>" src="<?php echo $sitelogo; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</div>
<?php else : ?>
<div class="site-logo">
<h1 class="logo"><?php bloginfo( 'name' ); ?></h1>
</div>
<?php endif; ?>
</div>
<?php
/* main and mobile menu cache */
if( ot_get_option('ut_use_cache' , 'off') == 'on' ) {
$language_prefix = defined('ICL_LANGUAGE_CODE') ? '_' . ICL_LANGUAGE_CODE : '';
$main_menu = get_transient('ut_main_menu' . get_the_ID() . $language_prefix );
$mobile_menu = get_transient('ut_mobile_menu' . get_the_ID() . $language_prefix );
$cacheTime = ot_get_option('ut_cache_ltime' , '10');
if ($main_menu === false) {
$main_menu = wp_nav_menu( $mainmenu );
set_transient('ut_main_menu' . get_the_ID() . $language_prefix , $main_menu, 60*$cacheTime);
}
if ($mobile_menu === false) {
$mobile_menu = wp_nav_menu( $mobilemenu );
set_transient('ut_mobile_menu' . get_the_ID() . $language_prefix , $mobile_menu, 60*$cacheTime);
}
} else {
$main_menu = wp_nav_menu( $mainmenu );
$mobile_menu = wp_nav_menu( $mobilemenu );
} ?>
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php echo $main_menu; ?>
<div class="ut-mm-trigger tablet-grid-50 mobile-grid-50 hide-on-desktop">
<button class="ut-mm-button"></button>
</div>
<?php echo $mobile_menu; ?>
<?php endif; ?>
</div>
</div><!-- close .ha-header-perspective -->
<?php if( $navigation_width == 'centered') :?>
</div>
<?php endif; ?>
</header><!-- close header -->
<div class="clear"></div>
<!-- Commented this out too --------------------->
<?php// get_template_part( 'template-part', 'hero' ); ?>
<!-- just in case commented this out-->
<?php // ut_before_content_hook(); // action hook, see inc/ut-theme-hooks.php ?>
<div id="main-content" class="wrap ha-waypoint" data-animate-up="ha-header-hide" data-animate-down="ha-header-small">
<a class="ut-offset-anchor" id="to-main-content"></a>
<div class="main-content-background">
Right now my header in mystile theme looks like in picture 1, is it possible to make it look like in picture 2. In short i want to have featured banner image above the main navigation without white space between them.
Can someone please tell me the custom CSS for that or what to put in header.php?
Thanks a lot in advance.
Picture 1
1
Picture 2
2
this is my header.php
<?php
// File Security Check
if ( ! empty( $_SERVER['SCRIPT_FILENAME'] ) && basename( __FILE__ ) == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
die ( 'You do not have sufficient permissions to access this page!' );
}
?>
<?php
/**
* Header Template
*
* Here we setup all logic and XHTML that is required for the header section of all screens.
*
* #package WooFramework
* #subpackage Template
*/
global $woo_options, $woocommerce;
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php if ( $woo_options['woo_boxed_layout'] == 'true' ) echo 'boxed'; ?> <?php if (!class_exists('woocommerce')) echo 'woocommerce-deactivated'; ?>">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php woo_title(''); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
wp_head();
woo_head();
?>
</head>
<body <?php body_class(); ?>>
<?php woo_top(); ?>
<div id="wrapper">
<div id="top">
<nav class="col-full" role="navigation">
<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
<?php } ?>
<?php
if ( class_exists( 'woocommerce' ) ) {
echo '<ul class="nav wc-nav">';
woocommerce_cart_link();
echo '<li class="checkout">'.__('Checkout','woothemes').'</li>';
echo get_search_form();
echo '</ul>';
}
?>
</nav>
</div><!-- /#top -->
<?php woo_header_before(); ?>
<header id="header" class="col-full">
<hgroup>
<?php
$logo = esc_url( get_template_directory_uri() . '/images/logo.png' );
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' && is_ssl() ) { $logo = preg_replace("/^http:/", "https:", $woo_options['woo_logo']); }
?>
<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
<a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php esc_attr( get_bloginfo( 'description' ) ); ?>">
<img src="<?php echo $logo; ?>" alt="<?php esc_attr( get_bloginfo( 'name' ) ); ?>" />
</a>
<?php } ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<h3 class="nav-toggle">☰ <span><?php _e('Navigation', 'woothemes'); ?></span></h3>
</hgroup>
<?php woo_nav_before(); ?>
<nav id="navigation" class="col-full" role="navigation">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav fl">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><?php _e( 'Home', 'woothemes' ); ?></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>
</nav><!-- /#navigation -->
<?php woo_nav_after(); ?>
</header><!-- /#header -->
<?php woo_content_before(); ?>
and i know that this control featured banner image
but if move that line to any onther place in header.php my main navigation simply disappear. what do i miss, some codeing or?
ok i did insert featured banner image with your help but know it is in top left corner of webpage and no matter what i do it wont move to the right. its look like it take 50% of left side of page and i cant center it to the middle, any advice?
You should edit header.php and replace between
"featured banner" to "main navigation".
And for the empty space, Check theme styles in chrome inspect tool and add custom styles.
I recommend you to use child-theme, because if you modify a theme directly and it is updated, then your modifications may be lost.
For Nav:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
For Banner:
<header id="masthead" class="site-header" role="banner"></header>
I've removed the Search function from the theme 'Corporate' (by WP Explorer), I've deleted Search.php Searchform.php, search from CSS and also Search from the Header file, however the area where search was is now clickable, linking to homepage.
Header info below:
<?php
/**
* The Header for our theme.
*
* #package WordPress
* #subpackage Corporate WPExplorer Theme
* #since Corporate 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( get_theme_mod('wpex_custom_favicon') ) { ?>
<link rel="shortcut icon" href="<?php echo get_theme_mod('wpex_custom_favicon'); ?>" />
<?php } ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrap" class="clr container">
<div id="header-wrap" class="clr">
<header id="header" class="site-header clr" role="banner">
<?php
// Outputs the site logo
// See functions/logo.php
wpex_logo(); ?>
<!-- Search removed from here -->
</header><!-- #header -->
</div><!-- #header-wrap -->
<div id="sidr-close"></div>
<div id="site-navigation-wrap">
<span class="fa fa-bars"></span><?php echo __( 'Menu', 'wpex' ); ?>
<nav id="site-navigation" class="navigation main-navigation clr" role="navigation">
<?php
// Display main menu
wp_nav_menu( array(
'theme_location' => 'main_menu',
'sort_column' => 'menu_order',
'menu_class' => 'dropdown-menu sf-menu',
'fallback_cb' => false
) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #site-navigation-wrap -->
<div id="main" class="site-main clr">
Add the search div back, but only remove the code within the div. By removing the div, you removed the space that it was taking up and the logo's clickable area was extended to be wider. Removing it fully will require some CSS edits.