Having an issue with navigation drop down menu not appearing on website with mobile devices. Using Kingdom Theme
Website: www.fleeknsleek.com
`CSS Snippet:
.navigationbar {
border: none;
border-left: none;
border-right: none;
width: 100%;
position: relative;
}
.kd-menu-effect {
width:100%;
height: 100%;
background-color: rgba(0,0,0,.5);
position: relative;
z-index: 99;
display: none;
}
#alternate_menu {
z-index: 999;
}
html body .kd_alternate_menu .kd_alternate_menu-submenu-items a {
color:#333;
}
.navigationbar .container {
position: relative;
}
.navigationbar ul.kd_main_menu {
display: table;
margin: 0;
padding: 0;
width: 100%;
position: relative;
}
.navigationbar .kd_main_menu li {
color: #2f2f2f;
display: inline-block;
font-family: "Open Sans";
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
list-style: none;
padding: 7px 0 7px;
position: relative;
text-transform: uppercase;
}
.navigationbar .kd_main_menu li:hover {
background: rgba(255,255,255,0.08);
}
.navigationbar .kd_main_menu > li a {
display: block;
padding: 0px 20px 20px 20px;
}
.navigationbar .kd_main_menu > li.homeicon a {
font-size: 15px !important;
padding-left: 18px;
padding-right: 25px;
}
.navigationbar .kd_main_menu > li.homeicon a i {
vertical-align: middle;
}
.navigationbar .kd_main_menu li a {
color: #2c3e50;
font-weight: 700;
letter-spacing: 0.06em;
}
.navigationbar .kd_main_menu li a i.fa {
display: inline-block;
margin-right: 5px;
margin-left: 5px;
}
.navigationbar .kd_main_menu .kd_active,
.navigationbar .kd_main_menu li a:hover {
color: #781b80;
}
.navigationbar .kd_main_menu > li.current-menu-item a {
color: #781b80;
}
.navigationbar .kd_main_menu .tree-col {
width: 540px !important;
}
.navigationbar .kd_main_menu .two-col {
width: 320px !important;
}
.navigationbar .kd_main_menu .one-col {
width: 180px !important;
}
.navigationbar .kd_main_menu .sub-menu {
background-color: #ffffff !important;
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3) !important;
display: none;
left: 0;
min-width: 250px;
overflow: visible !important;
padding: 15px 25px;
position: absolute;
top: 60px;
width: 100%;
z-index: 500;
}
.navigationbar .kd_main_menu .sub-menu li {
background-image: none;
color: #6e6e6e;
display: block;
font-size: 18px;
padding: 0;
}
.navigationbar .kd_main_menu .sub-menu li a {
color: #262626;
font-size: 18px;
font-weight: 700;
margin: 0px 0px 0px 0px;
padding: 6px 0;
text-transform: none;
}
.navigationbar .kd_main_menu .sub-menu li:first-child a {
font-weight: 700;
}
.navigationbar .kd_main_menu .sub-menu li a:hover {
color: #c73030;
}
.navigationbar .kd_main_menu > li:hover .sub-menu {
display: block;
}
.navigationbar .kd_main_menu > li:hover i.icon_arrow-menu {
display: block;
}
.navigationbar i.icon_arrow-menu {
left: 10px;
position: absolute;
top: 22px;
display: none;
}
.menu-headline {
display: none;
text-align: left;
font-size: 16px;
position: relative;
z-index: 99;
color: #fff;
margin-top: 20px;
font-weight: bold;
text-transform: uppercase;
}
.menu-headline i {
position: absolute;
top: 4px;
right: 10px;
font-size: 20px;
}
Php Snippet:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="kd-menu-effect"></div>
<?php if( get_theme_mod('enable_top_bar') == 'YES' ) { ?>
<div class="kd_header_top">
<div class="container ">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
<?php
if(has_nav_menu( 'top_nav' )){
?>
<!-- Main Menu -->
<nav class="kd_header_top_menu">
<?php
wp_nav_menu(array(
'theme_location' => 'top_nav',
'menu_id' => 'top_nav'
));
?>
</nav>
<?php
}
?>
</div>
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-12">
<?php if( get_theme_mod( 'email' ) ){ ?>
<div class="kd_email_support">
<?php echo get_theme_mod( 'email' ); ?>
</div>
<?php } ?>
<?php if( get_theme_mod( 'phone_no' ) ){ ?>
<div class="kd_phone_support">
<?php echo get_theme_mod( 'phone_no' ); ?>
</div>
<?php } ?>
<ul class="kd_header_social_list">
<?php if( get_theme_mod('head_facebook_url_on') == 'YES' ) { ?>
<li>
<a href="<?php echo esc_url( get_theme_mod('head_facebook_url') ); ?>" target="_blank">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<?php } ?>
<?php if( get_theme_mod('head_twitter_url_on') == 'YES' ) { ?>
<li>
<a href="<?php echo esc_url( get_theme_mod('head_twitter_url') ); ?>" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<?php } ?>
<?php if( get_theme_mod('head_youtube_url_on') == 'YES' ) { ?>
<li>
<a href="<?php echo esc_url( get_theme_mod('head_youtube_url') ); ?>" target="_blank">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</a>
</li>
<?php } ?>
<?php if( get_theme_mod('head_gplus_url_on') == 'YES' ) { ?>
<li>
<a href="<?php echo esc_url( get_theme_mod('head_gplus_url') ); ?>" target="_blank">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
<?php } ?>
<?php if( get_theme_mod('head_instagram_url_on') == 'YES' ) { ?>
<li>
<a href="<?php echo esc_url( get_theme_mod('head_instagram_url') ); ?>" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
<?php if( has_nav_menu( 'main_nav' ) || has_nav_menu('alternate_nav') ) { ?>
<!-- Main Menu -->
<nav class="navigationbar <?php echo has_nav_menu( 'alternate_nav' ) ? 'kd_has_alternate_nav' : ''; ?>">
<div class="container">
<?php
if( has_nav_menu('alternate_nav') ) {
$menu_name = 'alternate_nav';
$locations = get_nav_menu_locations();
$menu_id = $locations[ $menu_name ] ;
$menu = wp_get_nav_menu_object($menu_id);
echo '<div id="alternate_menu"><span>' . ( $menu->name ) . '</span>';
wp_nav_menu(array(
'theme_location' => 'alternate_nav',
'menu_class' => 'kd_alternate_menu ' . ( get_theme_mod('enable_display') == 'YES' ? "kd_default_open_hp" : '') . '',
'walker' => new kingdom_themeWalkerMainNav()
));
echo '</div>';
}
if( has_nav_menu( 'main_nav' ) ) {
?>
<div class="menu-headline">
<span data-alttext="Close Shopping">Shopping</span>
<i class="micon icon-menu7"></i>
</div>
<?php
wp_nav_menu(array(
'theme_location' => 'main_nav',
'menu_class' => 'kd_main_menu',
'walker' => new kingdom_themeWalkerMainNav()
));
}
?>
</div>
</nav>
<?php } ?>
<!-- Header Elements -->
<div class="kd_header_bg_color">
<div class="container ">
<div class="kd_header_elements">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<?php
$logo_width = ( get_theme_mod( 'logo_width' ) ) ? get_theme_mod( 'logo_width' ) : '100%';
$logo_height = ( get_theme_mod( 'logo_height' ) ) ? get_theme_mod( 'logo_height' ) : '100%';
?>
<div class="kd_logo" style="max-width: <?php echo $logo_width; ?>; max-height: <?php echo $logo_height; ?>;">
<a href="<?php echo esc_url( home_url('/') );?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
<?php if( get_theme_mod( 'logo' ) ){
echo '<img style="max-width: ' . $logo_width . '; max-height: ' . $logo_height . ';" src="' . get_theme_mod( 'logo' ) . '" alt="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '">';
} else {
echo '<img style="max-width: ' . $logo_width . '; max-height: ' . $logo_height . ';" src="' . esc_url( (kingdom()->cfg['paths']['theme_dir_url']) . '/images/kd_logo.png' ) . '" alt="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '">';
}
?>
</a>
</div>
</div>
<div class="col-lg-8 col-md-6 col-sm-6 col-xs-12">
<div class="kd_search">
<form role="search" action="<?php echo esc_url( home_url('/') ); ?>" method="get">
<input type="hidden" name="post_type" value="product" />
<button type="submit" class="kd_search_submit" value="<?php esc_html_e( 'Search', 'kingdom');?>" ><i class="fa fa-search" aria-hidden="true"></i></button>
<input type="text" id="search" name="s" placeholder="<?php esc_html_e( 'type to search', 'kingdom'); ?>" />
</form>
</div>
<?php
if( kingdom()->is_woo_activated() ) {
?>
<div id="kd_checkout_wrap">
<?php esc_html_e( 'Checkout', 'kingdom'); ?>
<div class="kd_small-cart">
<div class="kd_cart-title">
<i class="micon icon-cart5"></i>
<?php global $woocommerce; ?>
<a class="cart-contents" href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" title="<?php esc_attr_e('View your shopping cart', 'kingdom'); ?>"><?php esc_html_e( 'Cart', 'kingdom' ); ?>:
<span><?php echo $woocommerce->cart->get_cart_total(); ?></span></a> -
<span class="kd_cart-itemsnumber">(<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'kingdom'), $woocommerce->cart->cart_contents_count);?> )</span>
</div>
<div class="cart-details-wrapper">
<?php
//wc_get_template( 'cart/mini-cart.php' );
?>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div><!-- END HEADER ELEMENTS -->
</div>
<?php } ?>
<?php
if( is_search() == false ) {
if( isset(kingdom()->coreFunctions->data['layout']) && isset(kingdom()->coreFunctions->data['layout']['revolution_slider_select']) ) {
$revslider_select = kingdom()->coreFunctions->data['layout']['revolution_slider_select'];
//var_dump($revslider_select);
//die;
if( isset($revslider_select) && $revslider_select != '' && $revslider_select != 'no-slider' ) {
echo do_shortcode('[rev_slider alias="' . $revslider_select . '"]');
}
}
}
?>
<!-- Breadcrumbs -->
<?php
if( !is_front_page() ){
?>
<div class="kd_breadcrumbs_bk">
<div class="container">
<div class="row">
<?php echo kingdom()->coreFunctions->display_breadcrumbs();?>
</div>
</div>
</div>
<?php
}
?>
I need help fixing this issue.
Thanks in advance!
Related
Following along a tutorial when I got stuck with the CSS portion, the Wordpress site seems to be unresponsive to the changes I make in the CSS code. I'll post what I have:
//file abraham-admin.php
<h1>Abraham Theme Options</h1>
<?php settings_errors(); ?>
<?php
$firstName = esc_attr( get_option( 'first_name' ) );
$lastName = esc_attr( get_option( 'last_name' ) );
$fullName = $firstName . ' ' . $lastName;
$description = esc_attr( get_option( 'user_description' ) );
?>
<div class="abraham-sidebar-preview">
<div class="abraham-sidebar">
<h1 class="abraham-username"><?php print $fullName ?></h1>
<h2 class="abraham-description"><?php print $description ?></h2>
<div class="icons-wrapper">
</div>
</div>
</div>
<form method="post" action="options.php" class="abraham-general-form">
<?php settings_fields( 'abraham-settings-group'); ?>
<?php do_settings_sections( 'z_abraham'); ?>
<?php submit_button(); ?>
</form>
//file enqueue.php
function abraham_load_admin_scripts() {
wp_register_style('abraham_admin', get_template_directory_uri() . '/css/abraham_admin.css', array(), '1.0.0', 'all');
wp_enqueue_style('abraham_admin');
}
add_action( 'admin_enqueue_scripts', 'abraham_load_admin_scripts');
//file abraham_admin.css
.abraham-general-form,
.abraham-sidebar-preview { display: inline-blog; float: left; }
.abraham-sidebar-preview { width: 200px; background-color: #3f3f3f; padding: 20px; text-align: center; margin-right: 20px}
.abraham-sidebar { display: block; text-align: center; }
h1.abraham-username,
h2.abraham-description { font-weight: 100; color: #ffffff; }
h1.abraham-username { font-size: 24px; margin: 0 0 10px; }
h2.abraham-description { font-size: 13px; margin: 0 0 20px; }
Any help is appreciated. Thanks!
everything worked out great until this morning but I can't find out what is causing this problem.
The problem:
I need a search bar on the right of my nav items but it doesn't want to go to the right side.
The HTML(PHP):
<!-- HEADER
================================================== -->
<header class="header-type-5">
<div class="background-header"></div>
<div class="slider-header">
<!-- Top of pages -->
<div id="top" class="<?php if($theme_options->get( 'header_layout' ) == 1) { echo 'full-width'; } elseif($theme_options->get( 'header_layout' ) == 4) { echo 'fixed3 fixed2'; } elseif($theme_options->get( 'header_layout' ) == 3) { echo 'fixed2'; } else { echo 'fixed'; } ?>">
<div class="background-top"></div>
<div class="background">
<div class="shadow"></div>
<div class="pattern">
<div class="container">
<div class="row">
<!-- Header Left -->
<div class="col-sm-4" id="header-left">
<?php if ($logo) { ?>
<!-- Logo -->
<div class="logo"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></div>
<?php } ?>
</div>
<!-- Header Right -->
<div class="col-sm-8" id="header-right">
<?php
$top_block = $modules->getModules('top_block');
if( count($top_block) ) {
foreach ($top_block as $module) {
echo $module;
}
} ?>
<?php echo $currency.$language; ?>
<!-- <i class="fa fa-user"></i> -->
<div class="links">
<a class="l-a" href="index.php?route=account/account">Mijn Account</a>
<a class="l-s" href="index.php?route=checkout/cart">Winkelwagen</a>
<a class="l-c" href="index.php?route=checkout/checkout">Afrekenen</a>
</div>
<?php echo $cart; ?>
</div>
</div>
</div>
<style>
.sexy_line {
height: 1px;
background: white;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#222222), to(#222222), color-stop(50%, white));
}
</style>
<div class="sexy_line"></div>
<?php if($theme_options->get( 'megamenu_type' ) == 4 || $theme_options->get( 'megamenu_type' ) == 5 || $theme_options->get( 'megamenu_type' ) == 6 || $theme_options->get( 'megamenu_type' ) == 9 || $theme_options->get( 'megamenu_type' ) == 14 || $theme_options->get( 'megamenu_type' ) == 19 || $theme_options->get( 'megamenu_type' ) == 29) { ?>
<div class="container container-megamenu2">
<?php } ?>
<?php
$menu = $modules->getModules('menu');
if( count($menu) ) { ?>
<div class="megamenu-background">
<div class="">
<div class="overflow-megamenu container">
<?php
if(count($menu) > 1) echo '<div class="row mega-menu-modules">';
$i = 0;
foreach ($menu as $module) {
if($i == 0 && count($menu) > 1) echo '<div class="col-md-3">';
if($i == 1 && count($menu) > 1) echo '<div class="col-md-9">';
echo $module;
if(count($menu) > 1 && ($i == 0 || $i == 1)) echo '</div>';
if(count($menu) > 1 && $i == 1) echo '</div>';
$i++;
} ?>
</div>
</div>
</div>
<?php } elseif($categories) { ?>
<div class="megamenu-background">
<div class="">
<div class="overflow-megamenu container">
<div class="container-megamenu horizontal">
<div class="megaMenuToggle">
<div class="megamenuToogle-wrapper">
<div class="megamenuToogle-pattern">
<div class="container">
<div><span></span><span></span><span></span></div>
Navigation
</div>
</div>
</div>
</div>
<div class="megamenu-wrapper">
<div class="megamenu-pattern">
<div class="container">
<ul class="megamenu shift-up">
<?php foreach ($categories as $category) { ?>
<?php if ($category['children']) { ?>
<li class="with-sub-menu hover"><p class="close-menu"></p><p class="open-menu"></p>
<span><strong><?php echo $category['name']; ?></strong></span>
<?php } else { ?>
<li>
<span><strong><?php echo $category['name']; ?></strong></span>
<?php } ?>
<?php if ($category['children']) { ?>
<?php
$width = '100%';
$row_fluid = 3;
if($category['column'] == 1) { $width = '220px'; $row_fluid = 12; }
if($category['column'] == 2) { $width = '500px'; $row_fluid = 6; }
if($category['column'] == 3) { $width = '700px'; $row_fluid = 4; }
?>
<div class="sub-menu" style="width: <?php echo $width; ?>">
<div class="content">
<p class="arrow"></p>
<div class="row hover-menu">
<?php for ($i = 0; $i < count($category['children']);) { ?>
<div class="col-sm-<?php echo $row_fluid; ?> mobile-enabled">
<div class="menu">
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><?php echo $category['children'][$i]['name']; ?></li>
<?php } ?>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
<!-- Search -->
<div class="search_form">
<div class="button-search"></div>
<input type="text" class="input-block-level search-query" name="search" placeholder="<?php echo str_replace('...', '', $search); ?>" id="search_query" value="" />
<?php if($theme_options->get( 'quick_search_autosuggest' ) != '0') { ?>
<div id="autocomplete-results" class="autocomplete-results"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#search_query').autocomplete({
delay: 0,
appendTo: "#autocomplete-results",
source: function(request, response) {
$.ajax({
url: 'index.php?route=search/autocomplete&filter_name=' + encodeURIComponent(request.term),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item.name,
value: item.product_id,
href: item.href,
thumb: item.thumb,
desc: item.desc,
price: item.price
}
}));
}
});
},
select: function(event, ui) {
document.location.href = ui.item.href;
return false;
},
focus: function(event, ui) {
return false;
},
minLength: 2
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
});
</script>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
<?php if($theme_options->get( 'megamenu_type' ) == 4 || $theme_options->get( 'megamenu_type' ) == 5 || $theme_options->get( 'megamenu_type' ) == 6 || $theme_options->get( 'megamenu_type' ) == 9 || $theme_options->get( 'megamenu_type' ) == 14 || $theme_options->get( 'megamenu_type' ) == 19 || $theme_options->get( 'megamenu_type' ) == 29) { ?>
</div>
<?php } ?>
<?php
$menu2 = $modules->getModules('menu2');
if( count($menu2) ) {
echo '<div class="overflow-menu2">';
foreach ($menu2 as $module) {
echo $module;
}
echo '</div>';
} ?>
</div>
</div>
</div>
</div>
<?php $slideshow = $modules->getModules('slideshow'); ?>
<?php if(count($slideshow)) { ?>
<!-- Slider -->
<div id="slider" class="<?php if($theme_options->get( 'slideshow_layout' ) == 1) { echo 'full-width'; } elseif($theme_options->get( 'slideshow_layout' ) == 4) { echo 'fixed3 fixed2'; } elseif($theme_options->get( 'slideshow_layout' ) == 3) { echo 'fixed2'; } else { echo 'fixed'; } ?>">
<div class="background-slider"></div>
<div class="background">
<div class="shadow"></div>
<div class="pattern">
<?php foreach($slideshow as $module) { ?>
<?php echo $module; ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</header>
(The "search_form" div doesn't work)
The CSS part:
/* #group Search */
#media(max-width: 991px){
#top .search_form {
padding: 0px;
padding-top:0px;
vertical-align: top;
width: 100%;
position: absolute;
display: none;
}
#top .search_form input {
padding: 11px 35px 10px 20px;
margin: 0px;
height: 40px;
width: 230px;
font-size: 12px;
display: none;
}
.search_form .button-search,
.search_form .button-search2 {
font-family: FontAwesome;
position: absolute;
right: 45px;
top: 10px;
cursor: pointer;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: none;
}
}
#top .search_form {
margin: 6px 26px 0px 0px;
padding: 0px;
display: inline-block;
vertical-align: top;
width: 170px;
position: absolute !important;
right:0px;
}
.header-type-2 #top .search_form {
width: auto !important;
max-width: 270px;
display: block;
}
#top .search_form input {
padding: 11px 35px 10px 20px;
margin: 0px;
height: 40px;
width: 230px;
font-size: 12px;
}
.search-type-2 #top .search_form input {
-webkit-box-shadow: inset 0px 2px 2px 1px rgba(0,0,0,0.06);
-moz-box-shadow: inset 0px 2px 2px 1px rgba(0,0,0,0.06);
box-shadow: inset 0px 2px 2px 1px rgba(0,0,0,0.06);
}
.search-type-3 #top .search_form input {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.search-type-4 #top .search_form input {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.search-type-5 #top .search_form input {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.search-type-7 #top .search_form input {
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.search-type-6 #top .search_form input {
-webkit-box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.04), inset 0px 3px 8px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.04), inset 0px 3px 8px 3px rgba(0,0,0,0.3);
box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.04), inset 0px 3px 8px 3px rgba(0,0,0,0.3);
}
.search_form .button-search,
.search_form .button-search2 {
font-family: FontAwesome;
position: absolute;
right: 45px;
top: 10px;
cursor: pointer;
font-size: 16px;
line-height: 16px;
font-weight: 400;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.search_form .button-search:before,
.search_form .button-search2:before {
content: "\f002";
}
/* #end */
I hope someone knows what is causing this problem.
Thanks in advance
I'm having a nightmare trying to center a logo in the header on a WP template. Can anyone please work out the following code and center the logo?
CSS
/**
* Header
* --------------------------------------------------------------------------- */
#header {
padding-top: 3em;
margin-bottom: 2.5em; }
#header #branding {
*zoom: 1;
max-width: 80%;
display: inline-block;
text-align: left; }
#header #branding:before, #header #branding:after {
content: " ";
display: table; }
#header #branding:after {
clear: both; }
#header #site-title {
display: inline-block;
margin: 0;
font-size: 2.25em;
text-align: left; }
#header #site-title a {
display: inline-block;
text-align: inherit; }
#header #site-title img {
display: block;
text-align: inherit;
margin: 0 auto;
vertical-align: baseline; }
#header.with-woocommerce #branding {
max-width: 100%;
display: block;
text-align: center;
margin-bottom: 2em; }
#header.with-woocommerce #site-title {
text-align: center; }
#header.with-woocommerce #site-title a {
display: block; }
PHP
<header id="header" class="<?php echo $hclass; ?>">
<hgroup id="branding">
<h1 id="site-title" role="logo">
<a href="<?php echo trailingslashit( esc_url( home_url() ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
<?php if ( get_theme_mod( 'bearded_logo' ) ) : ?>
<img src="<?php echo esc_url( get_theme_mod( 'bearded_logo' ) ); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<?php else : bloginfo( 'name' ); endif; ?>
</a>
</h1>
<h2 id="site-description" class="hide-for-small"><?php bloginfo( 'description' ); ?></h2>
</hgroup><!-- #branding -->
<hgroup id="navigation" role="navigation" >
<?php do_atomic( 'before_nav' ); ?>
<?php get_template_part( 'menu', 'primary' ); // Loads the menu-primary.php template. ?>
<?php do_atomic( 'after_nav' ); ?>
</hgroup>
</header><!-- #header -->
Please help. Thank you - any advice would be much appreciated!
Add to CSS:
#site-title img {
margin-left: 45%;
}
Based off your more recent changes to the site you can add this to center the logo
#header #branding, #header.with-woocommerce #branding {
display: table;
margin: 0 auto;
}
If you go back to where the shop-nav is not full width I would make the header position relative and absolute position the shop-nav top right 0.
Give id="site-title" a margin-left: 43%
Hi I would like to edit my css making my main nav go below my logo which will be centered.
It looks like this right now
I want it to look like this
This is what my css looks like. Thank you very much for any help I can get
/* -- header layout -- */
#masthead .row {
height: 100%; }
#masthead .header-container {
display: table;
height: 100%;
width: 100%; }
#masthead .left-links {
display: table-cell;
vertical-align: middle; }
#masthead .right-links {
display: table-cell;
vertical-align: middle; }
#masthead .left-links > ul {
float: left;
padding-top: 15px;
margin-left: 15px; }
#masthead .right-links > ul {
float: right;
padding-top: 15px; }
/* -- sticky header -- **/
#masthead.stuck {
opacity: 0.95;
position: fixed;
top: -200px;
left: 0;
right: 0;
z-index: 100;
-webkit-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.2); }
#masthead.stuck:hover {
opacity: 1; }
#masthead.stuck.move_down {
height: 70px;
top: 0; }
#masthead.stuck.move_down .catalog-mode-header, #masthead.stuck.move_down .left-links > ul, #masthead.stuck.move_down .right-links > ul,
#masthead.stuck.move_down #logo a {
padding: 0 !important; }
#masthead.stuck.move_down #logo a {
float: none; }
#masthead.stuck.move_up {
top: -300px; }
/* -- boxed header style --*/
.boxed #masthead {
max-width: 71.25em;
width: 100%;
left: auto;
right: auto; }
.boxed #masthead.stuck {
left: auto;
right: auto; }
/* -- centered logo -- */
.logo-center #masthead .left-links {
width: 40%; }
.logo-center #masthead .right-links {
width: 40%; }
.logo-center #masthead #logo {
width: 20%;
text-align: center; }
.logo-center #masthead .left-links > ul {
margin-left: 0; }
.logo-center #masthead .left-links > ul > li {
margin-left: 0;
margin-right: 20px; }
/* -- navigation -- */
ul.header-nav {
margin: 0; }
ul.header-nav li {
float: left;
margin-left: 20px;
list-style: none; }
ul.header-nav li a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
text-transform: uppercase;
font-size: 80%;
font-weight: bold;
padding: 10px 0; }
.right-links > ul.header-nav {
white-space: nowrap; }
.right-links > ul.header-nav > li {
display: inline-block !important;
float: none; }
/* -- navigation -- */
ul.header-nav {
margin: 0; }
ul.header-nav li {
float: left;
margin-left: 20px;
list-style: none; }
ul.header-nav li a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
transition: all 200ms ease-out;
text-transform: uppercase;
font-size: 80%;
font-weight: bold;
padding: 10px 0; }
.right-links > ul.header-nav {
white-space: nowrap; }
.right-links > ul.header-nav > li {
display: inline-block !important;
float: none; }
HTML
<?php if($flatsome_opt['logo_position'] == 'left') : ?>
<div id="logo" class="logo-left">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php endif; ?>
<div class="left-links">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php if (!isset($flatsome_opt['search_pos']) || $flatsome_opt['search_pos'] == 'left') { ?>
<li class="search-dropdown">
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if (isset($flatsome_opt['search_pos']) && $flatsome_opt['search_pos'] == 'right') { ?>
<li class="search-dropdown">
<div class="nav-dropdown">
<?php get_search_form( ); ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- .left-links -->
<?php if($flatsome_opt['logo_position'] == 'center') { ?>
<div id="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo( 'description' ); ?>" rel="home">
<?php if($flatsome_opt['site_logo']){
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
echo '<img src="'.$flatsome_opt['site_logo'].'" class="header_logo" alt="'.$site_title.'"/>';
} else {bloginfo( 'name' );}?>
</a>
</div><!-- .logo -->
<?php } ?>
<div class="right-links">
<?php if(!$flatsome_opt['catalog_mode']) { ?>
<ul class="header-nav">
<?php if(!isset($flatsome_opt['myaccount_dropdown']) || $flatsome_opt['myaccount_dropdown']) { ?>
<li class="account-dropdown hide-for-small">
<?php
if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="nav-top-link">
<?php _e('My Account', 'woocommerce'); ?>
</a>
<div class="nav-dropdown">
<ul>
<?php if ( has_nav_menu( 'my_account' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'my_account',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 0,
));
?>
<?php else: ?>
<li>Define your My Account dropdown menu in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
</div><!-- end account dropdown -->
<?php } else { ?>
<?php _e('Login', 'woocommerce'); ?>
<?php
}
?>
</li>
<?php } ?>
<!-- Show mini cart if Woocommerce is activated -->
<?php if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<li class="mini-cart">
<div class="cart-inner">
<?php // Edit this content in inc/template-tags.php. Its gets relpaced with Ajax! ?>
<a href="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" class="cart-link">
<strong class="cart-name hide-for-small"><?php _e('Cart', 'flatsome'); ?></strong>
<span class="cart-price hide-for-small">/ <?php echo $woocommerce->cart->get_cart_total(); ?></span>
<!-- cart icon -->
<div class="cart-icon">
<?php if ($flatsome_opt['custom_cart_icon']){ ?>
<div class="custom-cart-inner">
<div class="custom-cart-count"><?php echo $woocommerce->cart->cart_contents_count; ?></div>
<img class="custom-cart-icon" src="<?php echo $flatsome_opt['custom_cart_icon']?>"/>
</div><!-- .custom-cart-inner -->
<?php } else { ?>
<strong><?php echo $woocommerce->cart->cart_contents_count; ?></strong>
<span class="cart-icon-handle"></span>
<?php }?>
</div><!-- end cart icon -->
</a>
<div class="nav-dropdown">
<div class="nav-dropdown-inner">
<!-- Add a spinner before cart ajax content is loaded -->
<?php if ($woocommerce->cart->cart_contents_count == 0) {
echo '<p class="empty">'.__('No products in the cart.','woocommerce').'</p>';
?>
<?php } else { //add a spinner ?>
<div class="loading"><i></i><i></i><i></i><i></i></div>
<?php } ?>
</div><!-- nav-dropdown-innner -->
</div><!-- .nav-dropdown -->
</div><!-- .cart-inner -->
</li><!-- .mini-cart -->
<?php } else {echo '<li>WooCommerce not installed!</li>';} ?>
</ul><!-- .header-nav -->
<?php } else { ?>
<div class="catalog-mode-header">
<?php echo do_shortcode($flatsome_opt['catalog_mode_header']); ?>
</div>
<?php } ?>
</div><!-- .right-links -->
</div><!-- .large-12 -->
</div><!-- .row -->
There are quite a few things that we need to look at here, I will list them one by one.
The contents are currently displayed as table-cell with the left-links, logo and right-links as 3 cells (each having a unique width). Hence, it is not possible to achieve the expected structure without modifying the HTML also.
First move the entire div with class as left-links to be outside the div with class as large-12 columns header-container. Change the CSS display property for left-links to be table-row (consider that the same as what a <tr> tag would do).
Change the display for #masthead .header-container also to be table-row and height to 75%. So effectively the logo and right-links are part of the first row in the table and left-links is part of the second row.
Change the width for the logo to be 100% so that it takes the entire width and gets centered.
Finally remove float for ul.header-nav li and set the display for #masthead .left-links > ul as table-cell.
Note: This is more a hacky solution than an optimal one. But this keeps the changes to the mark-up as minimal as possible.
Note 2: The position of the drop-down menus are getting affected a bit due to all these changes. I will update the answer once I have a solution for that also.
Use margin-top and margin-left Property of css for this. Try different values of it will provide you solution.
I have created a demo on codepen, check if this help you.
If you are supporting IE7 then you need to give width to ".headerLeft".
I have commented that code in css.
click here for demo
I am trying to add background image to div. For some reason I can't add picture. Can you guys tell me what I am doing wrong?
Here is code:
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');
background-repeat: no-repeat;
border: 1px solid #e5e5e5;
border-radius: 40px;
padding-bottom: 40px;
width: 99.893617021277%;
}
#featured p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
padding: 0 40px 0 40px;
text-align: center;
}
#featured-image {
margin: 40px 0 0 0;
}
#featured-image .fluid-width-video-wrapper {
margin-left: -20px;
}
.featured-image img {
margin-top: 44px;
}
Here is HTML/PHP part. It's a custom wordpress theme and I will only show you exact part of website where this DIV is used.
<div id="featured" class="grid col-940">
<div class="grid col-460">
<h1 class="featured-title">
<?php
if ( isset( $responsive_options['home_headline'] ) && $db && $empty )
echo $responsive_options['home_headline'];
else
_e( 'Hello, World!', 'responsive' );
?>
</h1>
<h2 class="featured-subtitle">
<?php
if ( isset( $responsive_options['home_subheadline'] ) && $db && $empty )
echo $responsive_options['home_subheadline'];
else
_e( 'Your H2 subheadline here', 'responsive' );
?>
</h2>
<p>
<?php
if ( isset( $responsive_options['home_content_area'] ) && $db && $empty )
echo do_shortcode( $responsive_options['home_content_area'] );
else
_e( 'Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive' );
?>
</p>
<?php if ($responsive_options['cta_button'] == 0): ?>
<div class="call-to-action">
<a href="<?php echo $responsive_options['cta_url']; ?>" class="blue button">
<?php
if( isset( $responsive_options['cta_text'] ) && $db && $empty )
echo $responsive_options['cta_text'];
else
_e('Call to Action','responsive');
?>
</a>
</div><!-- end of .call-to-action -->
<?php endif; ?>
</div><!-- end of .col-460 -->
<div id="featured-image" class="grid col-460 fit">
<?php $featured_content = ( !empty( $responsive_options['featured_content'] ) ) ? $responsive_options['featured_content'] : '<img class="aligncenter" src="' . get_template_directory_uri() . '/core/images/featured-image.png" width="440" height="300" alt="" />'; ?>
<?php echo do_shortcode( $featured_content ); ?>
</div><!-- end of #featured-image -->
</div><!-- end of #featured -->
EDIT 2: Added HTML output:
http://pastebin.com/T78ZPQZK
change this
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');
background-repeat: no-repeat;
border: 1px solid #e5e5e5;
border-radius: 40px;
padding-bottom: 40px;
width: 99.893617021277%;
}
to this
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #fff url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg') no-repeat;
border: 1px solid #e5e5e5;
border-radius: 40px;
padding-bottom: 40px;
width: 99.893617021277%;
}
or to this
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
background-image: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');
background-repeat: no-repeat;
border: 1px solid #e5e5e5;
border-radius: 40px;
padding-bottom: 40px;
width: 99.893617021277%;
}
Give this a shot, with what you provided should work, just try adding a height value and background-size to the #featured div...also, somewhere along the lines in your html you have a php error...
HTML:
<div id="featured" class="grid col-940">
<div class="grid col-460">
<h1 class="featured-title">
<?php
if ( isset( $responsive_options['home_headline'] ) && $db && $empty )
echo $responsive_options['home_headline'];
else
_e( 'Hello, World!', 'responsive' );
?>
</h1>
<h2 class="featured-subtitle">
<?php
if ( isset( $responsive_options['home_subheadline'] ) && $db && $empty )
echo $responsive_options['home_subheadline'];
else
_e( 'Your H2 subheadline here', 'responsive' );
?>
</h2>
<p>
<?php
if ( isset( $responsive_options['home_content_area'] ) && $db && $empty )
echo do_shortcode( $responsive_options['home_content_area'] );
else
_e( 'Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive' );
?>
</p>
<?php if ($responsive_options['cta_button'] == 0): ?>
<div class="call-to-action">
<a href="<?php echo $responsive_options['cta_url']; ?>" class="blue button">
<?php
if( isset( $responsive_options['cta_text'] ) && $db && $empty )
echo $responsive_options['cta_text'];
else
_e('Call to Action','responsive');
?>
</a>
</div><!-- end of .call-to-action -->
<?php endif; ?>
</div><!-- end of .col-460 -->
<div id="featured-image" class="grid col-460 fit">
<?php $featured_content = ( !empty( $responsive_options['featured_content'] ) ) ? $responsive_options['featured_content'] : '<img class="aligncenter" src="' . get_template_directory_uri() . '/core/images/featured-image.png" width="440" height="300" alt="" />'; ?>
<?php echo do_shortcode( $featured_content ); ?>
</div><!-- end of #featured-image -->
</div><!-- end of #featured -->
CSS:
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg') no-repeat 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
border: 1px solid #e5e5e5;
border-radius: 40px;
padding-bottom: 40px;
width: 99.893617021277%;
height: 500px; /*-- Specify to your liking --*/
}
#featured p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
padding: 0 40px 0 40px;
text-align: center;
}
#featured-image {
margin: 40px 0 0 0;
}
#featured-image .fluid-width-video-wrapper {
margin-left: -20px;
}
.featured-image img {
margin-top: 44px;
}
UPDATE / EDIT:
Better yet, take a look at this jsfiddle: http://jsfiddle.net/M63EG/1/
Updated code provided above!
Maybe, you need the !important key. So, in #featured CSS class, write this:
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg') !important;
in place of:
background: url('http://www.mobiexplore.com/temp1/wordpress/wp-content/uploads/2013/08/19377249_ml-1024x6651.jpg');