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
Related
My problem is that CSS styles are applied only for the first PHP loop iteration. PHP loop outputs Wordpress posts. I've inspected the page structure and saw that it objects have the needed structure (blocks and classes), but CSS is not applied to them except for the first one.
<div id="events-feed">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<?php
$args = array(
'posts_per_page'=> 5,
'orderby' => 'comment_count',
'category_name=events' );
$q = new WP_Query($args);
if($q->have_posts()) {
while($q->have_posts()){ $q->next_post();
$post_id = $q->post->ID;
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ) );
$title = get_the_title($post_id);
$date = get_the_date('d.m.Y', $post_id);
$content = get_post_field('post_content', $post_id);
?>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header">
<?php echo $title; ?> </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title">
<?php echo $date; ?> </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
<?php echo $content; ?>
</div>
</div>
</div>
</div>
<?php } } wp_reset_postdata(); ?>
The Styles & HTML are:
#events-feed {
background-color: #F9F6EB;
padding-top: 0.1px
}
#events-feed .title-wrapper {
padding: 20px 0;
position: relative;
text-align: center;
font-family: "PT Serif", serif;
padding: 0 50px;
margin-bottom: 65px
}
#events-feed .title-wrapper .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .title-wrapper .title-wrap .line {
background: #0E0304;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .title-wrapper .title-wrap .title {
background-color: #F9F6EB;
color: #0E0304;
font-size: 40px;
padding: 0 20px;
text-transform: uppercase;
z-index: 999
}
#events-feed .event-article {
background-color: #fff;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
color: #0E0304;
height: 1000px;
margin: 0 10% 100px;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
}
#events-feed .event-article .events-post .post-img {
background-color: grey;
background-size: cover;
max-width: 2000px;
padding-top: 48%
}
#events-feed .event-article .events-post .post-header {
margin-top: 40px;
font-size: 34px;
text-transform: uppercase
}
#events-feed .event-article .events-post .post-date {
padding: 20px 0;
position: relative;
text-align: center;
margin-bottom: 30px
}
#events-feed .event-article .events-post .post-date .title-wrap div {
display: inline-block;
vertical-align: middle
}
#events-feed .event-article .events-post .post-date .title-wrap .line {
background: #7D8082;
height: 1px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 15%;
z-index: 99
}
#events-feed .event-article .events-post .post-date .title-wrap .title {
background-color: #fff;
color: #7D8082;
font-size: 20px;
padding: 0 20px;
text-transform: capitalize;
z-index: 999
}
#events-feed .event-article .desc {
font-size: 20px;
margin: 0 50px
}
#events-feed .event-article .desc p {
margin-bottom: 27px
}
#events-feed .event-article .desc ul {
margin: 0 0 27px 40px;
text-align: left
}
.line {
height: 1px
}
<div id="events-feed" style="margin-top: 160px;">
<div class="container">
<div class="sym rose"></div>
<div class="title-wrapper">
<div class="title-wrap">
<div class="line"></div>
<div class="title">Наши события</div>
<div class="line"></div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День рождения ElRumbo </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 18.08.2015 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
18.08.2015 мы празднуем день рождения! В этот день с 19:00 мы принимаем гостей только по предзаказу столика. И подарки будем дарить мы!
<ul>
<li>Праздничная лотерея</li>
<li>Скидка 20%</li>
<li>Бокал вина в подарок каждому</li>
</ul>
В 21:45 фаер-шоу от творческой группы "FaBula" Будем рады быть вместе с вами в наш праздничный вечер!
<strong>Подробности при заказе столика.</strong>
</div>
</div>
</div>
</div>
<div class="event-article">
<div class="events-post">
<div class="post-img" style="backgroung-image:url('$thumbnail[0]\')"></div>
<div class="post-header"> День святого Валентина </div>
<div class="post-date">
<div class="title-wrap">
<div class="line"></div>
<div class="title"> 14.02.2016 </div>
<div class="line"></div>
</div>
</div>
</div>
<div class="desc">
Dias de los Enamorados 14 февраля - День Святого Валентина В этот вечер по предзаказу столика вас ждут:
<ul>
<li>Скидка 20% на коктейли группы "Мартини"</li>
<li>Праздничная лотерея</li>
<li>Особый коктейль, которого нет в меню</li>
</ul>
</div>
</div>
Thanks to Mr. or Mrs. FlyffyKitten I found the solution:
I had to move the least two closing tags out of the loop since they refer to parent elements of the looped objects. Sorry for disturbing everyone. Thank you for being helpful!
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!
I am having a big issue currently with my website : http://www.onetechsearch.com/recipes/?search=&images=1&from=&to=&cat=all.
What I am trying to do is to have my search bar, and under that to have my "extra search", and no matter how I try the extra search won't go under the normal search.
And I would like to make the extra fade-in and out when a button next to search is pressed, any clue how I can do that?
<style type="text/css">
#picture-side {
display: inline-block;
float:left;
z-index: 8;
text-align:center;
}
#picture-side1 {
display: inline-block;
float:left;
z-index: 9;
text-align:center;
}
.width-container {
max-width:1180px;
margin:0 auto;
position:relative;
}
#topbar {
background:#f2f2f2;
padding:15px 0 0 0;
min-height:70px;
position:fixed;
top:0;
z-index:998;
box-sizing: border-box;
width:100%;
box-shadow: 0 2px 10px #000;
}
#search input#sfield{
margin:0;
width:54%;
padding:0 10px;
font:normal 16px Arial, sans-serif;
border:none;
float:left;
border-radius:5px 0 0 5px;
box-shadow: 0 0 4px #444;
#picture-side2 {
display: inline-block;
float:left;
z-index: 10;
}
input[type="radio"]:checked+label{ border-bottom: 5px solid lime; }
.site-wrap {
display: none;
}
#picture {
visibility: hidden;
}
#picture2 {
visibility: hidden;
}
#video {
visibility: hidden;
}
</style>
<?php if(is_front_page() & 0){ ////////////////////ONLY ON FRONTPAGE///////////////////////?>
<ul id="side_cat" class="navigation">
<?php
global $client;
$categs = $client->getResult('*:*', "", 0, 1);
//$count = count($categs[0]['category_f']) > 20 ? 20 : count($categs[0]['category_f']);
$nCategs = $client->getResponse()->facet_counts->facet_queries;
$count = count((array)$nCategs);
foreach ($cat2 as $k => $v) {
$cat2[$k] = strtolower($v);
}
$categs_n = array();
$categs_v = array();
foreach ($nCategs as $k => $v)
{
$categs_v[] = $v;
$categs_n[] = $k;
}
$j = 0;
$newC = array();
for ($i= 0; $i < $count; $i++) {
/* foreach ($cat as $cat){ */
if (in_array($categs_n[$i], $cat2) && $j < 30 ) {
$j++;
$newC[] = ucfirst($categs_n[$i]); ?>
<?php }
}
foreach ($newC as $categ)
{ ?>
<li class="nav-item"><?php echo ucwords($categ); ?></li>
<?php
}
?>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger">
<label for="nav-trigger"></label>
<?php } else { ////////////////////OTHER PAGES///////////////////////?>
<?php }?>
<script src="jquery-1.8.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cat= ["C"];
$("#cat").select2({
data: cat
});
});
</script>
<div id="topbar">
<div class="width-container">
<h1><?php bloginfo('name'); ?></h1>
<div id="search">
<form action="<?php bloginfo('url');?>/recipes" method="GET" id="searchF">
<?php
$searched_term = get_query_var('recipe_search');
if (empty($searched_term)) {
$searched_term = isset($_GET["search"]) ? $_GET["search"] : "";
}
?>
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {echo 'value="'.$searched_term.'"';} ?>>
<input type="submit" value="Search">
</div>
</div>
<div id="extra-search" div style="display:flex;justify-content:center;align-items:center;z-index:-9000" >
<div id="picture-side">
<input type="radio" name="images" value="1" id="picture"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>><label for="picture">With Pictures</label>
</div>
<div id="picture-side1">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>><label for="picture2">Without Pictures</label>
</div>
<div id="picture-side2">
<input type="radio" name="images" value="0" id="video"
<?php if(isset($_GET["video"]) && $_GET["video"]=='1'){ echo 'checked';} ?>><label for="video">With video</label>
</div>
<div id="time-side">
<!--<small>Published time</small>-->
<input type="text" id="from-side" name="from" placeholder="Start date"
</div>
<select id="cat" name="cat">
<option value="all" selected>All categories</option>
<option value="HI">Hawaii</option>
<option value="C">Hawaji</option>
</select>
</div>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
console.log(1);
jQuery("#searchF").submit( function(event) {
console.log($("#cat :selected").val());
var bAction = "<?php bloginfo('url');?>";
bAction = bAction + "/recipes/category/" + $("#cat :selected").val();
jQuery("#searchF").find('#cat').attr('disabled', true);
jQuery(this).attr('action', bAction);
});
});
</script>
Just remove the float: left; on #search in the CSS.
Changes to make it work:
#topbar h1 - set width:
width: 100%;
#extra-search - set only those styles:
position: relative;
float: left;
max-width: 1180px;
margin: 0 auto;
if you want to take advantage of display:flex - just put another div inside of extra-search.
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');
i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.