I have in my header.php the following code. What I want to do is to position the logo with the text so that it stays there when it is viewed on a smaller device aswell. I am using the foundationpress theme on wordpress to do this. The title seems to dissappear when I insert the logo before it but if I insert the logo after the title its viewed fine :
<div class="top-bar-container contain-to-grid show-for-medium-up" role="navigation">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<?php bloginfo('name'); ?>
<img src="http://localhost/rabbit/wp-content/themes/FoundationPress-master/images/flogo.svg" width="80" height="80">
</li>
</ul>
<section class="top-bar-section">
<?php foundationPress_top_bar_l(); ?>
<?php foundationPress_top_bar_r(); ?>
</section>
</nav>
</div>
Related
I recently read a similar help topic here: https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ – I kind of understand it but I cant seem to get my head around how it relates to my situation.
I’m building a grid of client logos, using the ACF repeater function. I have the logos displaying correctly, the fields within the repeater are an image and a page link.
When you click on a logo, instead of a page link, I would like it to open up a modal window. Inside this modal window, I would like the logo again, a title and two text areas.
I just cant figure it out!!
Here’s my initial code for pulling through the logo repeater field:
<div style="background-color:#ffffff;width:100%;">
<div class="container margin-top-20" >
<div class="row">
<?php if( get_field('client_logos') ): ?>
<div style="clear:both;margin-top:20px;"></div>
<h3 class="brand-white" >Our Clients</h3>
<ul class="blocks blog-block logo-block">
<?php if( get_field('client_logos') ): ?>
<?php while( has_sub_field('client_logos') ): ?>
<li>
<div class="block-image">
<div class="logo-image">
<div class="logo-center">
<?php $logoblock = get_sub_field('client_logo'); ?>
<img src="<?php echo $logoblock['sizes']['medium']; ?>">
</div>
</div>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
<?php else: ?>
<?php endif; ?>
</div>
</div>
</div>
and here's my modal window code:
<div class="modal fade col-md-4" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" >
<div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
<div class="modal-header">
<!-- Close x --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Logo --> <?php the_field('client_logo');?>
<!-- Title --> <?php the_field('client_title');?>
</div>
<div class="modal-body">
<!-- Case Study --><?php the_field('text area 1');?>
<!-- Testimonial --><?php the_field('text area 2');?>
</div>
</div>
</div>
</div>
I feel like all the answers are there but I cant figure out how to put them together. If anyone could help me combine the two that would be amazing!!
First post - be gentle :)
I've run into an issue with row height in Bootstrap (I think). I'm brand new to Bootstrap and I'm trying to do some basic edits to my Wordpress site and really want to further my knowledge. Previously I had 4 items equally distributed across the page and it looked great. Well, I've added a fifth item and it's been dropped to the next row below the first four but isn't low enough on the page and blocks the content of one of the original four items.
How can I adjust the height of the offending row(s) to drop the bottom item low enough to accommodate the upper row?
Link to the actual page: HERE
Please see image and code below.
Offending item
HTML from the entire page:
<?php
/*
template name:Home Page
*/
get_header();
?>
<!-- banner starts -->
<div class="banner">
<div data-ride="carousel" class="carousel slide" id="carousel-example-captions">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-captions"></li>
<li data-slide-to="1" data-target="#carousel-example-captions" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-captions"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php $slides = get_field('slides','4');
if(is_array($slides) and count($slides)>0){
$num=0;
foreach($slides as $slides_val) {?>
<div class="item <?php if($num==0) echo "active"; ?>">
<img src="<?php echo $slides_val['slide_image']['url']; ?>" alt="900x500" data-src="holder.js/900x500/auto/#777:#777" data-holder-rendered="true">
<div class="carousel-caption">
<div class="banner-heading">
<span><?php echo $slides_val['slide_content_heading']; ?></span>
</div>
<?php echo $slides_val['slide_content']; ?>
<!-- Contact Us-->
</div>
</div>
<?php $num++; } }?>
</div>
<!-- Controls -->
<a data-slide="prev" role="button" href="#carousel-example-captions" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-captions" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- banner ends -->
<!-- content starts -->
<div class="content">
<div class="process-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Process</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'process',
'orderby'=> 'post_date',
'order' => 'DESC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-4 col-md-4 col-lg-4">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-inner">
<div class="filler-title"><?php the_title(); ?></div>
<?php the_content(); ?>
<!-- Read More-->
</div>
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<?php include('vip.php');?>
<div class="service-section">
<div class="container">
<div class="row">
<div class="process-heading">Our Services</div>
<div class="process-fillers-section">
<ul>
<?php
global $post,$paged;
$args = array(
'post_type'=>'services',
'order' => 'ASC'
);
$wp_query= new WP_Query($args);
$no_of_posts=$wp_query->found_posts;
while ($wp_query->have_posts()):$wp_query->the_post();
$src= wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
?>
<li class="col-sm-3 col-md-3 col-lg-3">
<div class="process-fillers-image-section">
<img src="<?php echo $src[0];?>" alt="" />
<div class="process-category"><?php the_title(); ?> </div>
</div>
<p><?php the_excerpt(); ?> </p>
Read More
</li>
<?php
endwhile;
?>
</ul>
</div>
</div>
</div>
</div>
<div class="instagram-section">
<div class="container">
<div class="row">
<div class="process-heading">
<div><img src="<?php bloginfo('template_url');?>/images/instagram-icon.png" alt="" /></div>
#H2Htpe</div>
<?php echo do_shortcode('[instagram]'); ?>
</div>
</div>
</div>
</div>
<!-- content ends -->
<?php get_footer('footer'); ?>
I am trying to add some animation to the mobile navigation to drop down slowly rather than have the page jumping. I am using the foundationpress theme. I can't seem to make it work with data-animate. This is my code snippet:
<div class="title-bar" data-responsive-toggle="site-navigation">
<button class="menu-icon" data-toggle="panel" type="button" data-toggle="mobile-menu"></button>
<div class="title-bar-title">
<div class="mini-logo">
<img class="mini-logo-img" src="/wp-content/uploads/2016/11/coc-logo.png" alt="Mountain View" style="width:4rem;height:auto;">
</div>
<!--<?php bloginfo( 'name' ); ?>-->
</div>
</div>
<!--<nav id="site-navigation" class="main-navigation nav-area" role="navigation" style="width:100%" >-->
<div class="top-bar-left">
<ul class="menu">
<li class="co-logo-top"></li>
<!--<li class="home"><?php bloginfo( 'name' ); ?></li>-->
</ul>
</div>
<div class="top-bar-right" >
<?php foundationpress_top_bar_r(); ?>
<?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
<?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
<?php endif; ?>
</div>
</nav>
I'm not seeing the actual '#mobile-menu' component in your code snippet, so not 100% sure what's happening here, but the thing to be aware of is that you need to have the data-animate attribute on the same element as you have your data-toggler attribute (which in this case is the thing being toggled, or '#mobile-menu'). See the example here: http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation
have you tried triggering it with jquery/js? see this thread: https://github.com/olefredrik/FoundationPress/issues/772.
also check that you have added the data-toggler attribute to the element
I'm developing a WordPress theme powered by Foundation 5. Everything seems work well, but something is wrong when I switch to smartphone.
As you can see in the image below, when resizing the browser window on desktop, foundation topbar collapses to small screen mode.
Unfortunately, if I access the page from my mobile browser, the the text in the topbar becomes smaller and the menu does not collapse.
here is header.php code:
<body <?php body_class(); ?>>
<header class="site-header" role="banner">
<div class="row">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header>
<div class="contain-to-grid">
<nav id="nav" role="navigation" class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><?php bloginfo( 'name' ); ?></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'right', 'walker' => new Foundation_Walker()) ); ?>
</section>
</nav>
</div>
<div id="container" class="row">
The image below shows what appears in my desktop browser:
As you can see, the menu collapse regularly.
The second image shows what happens in google chrome on android:
Same problem on iPad: the text is small and the menu does not collapse.
Hope somebody could help me.
Here is a live example: http://htmlintro.altervista.org/wordpress/
Solved!
I did not include the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Now it works fine.
First of all, the disclaimer: I am an absolute newbie.
I am modifying this theme, and, so far, I've come up with this.
My problem is the scrolling effect (amongst other things): when one clicks on one of the links in the circles, the scrolling effect will stop too 'early', as if the anchor were set too 'high' in relation to the text, leaving lots of white space above it.
I could try to set another anchor, perhaps a single character of the same colour of the background next to the h1 of every section, but I fear I might lose the scrolling effect. Also, I don't really know how to do that in WP.
So, in substance, my question is: how do I set the page to scroll so that the heading of each page is closer to the top of the screen?
Not sure if this of any use, but the following is the content of the template-home.php file, relating to navigation:
<div class="row">
<nav class="<?php if (get_post_meta($post->ID, 'fw_label_four', true)) { ?> offset2 <?php } else {?>offset3 <?php } ?> span8" id="nav-home">
<ul class="row">
<li class="span2">
<a class="circle-menu circle-black" href="#page-2"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_one', true);?></span></a>
<span class="arrow"></span>
</li>
<li class="span2">
<a class="circle-menu" href="#page-3"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_two', true);?></span></a>
<span class="arrow"></span>
</li>
<li class="span2">
<a class="circle-menu circle-black" href="#page-4"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_three', true);?></span></a>
<span class="arrow"></span>
</li>
<?php if (get_post_meta($post->ID, 'fw_label_four', true)) { ?>
<li class="span2">
<a class="circle-menu" href="#page-5"><span class="label-link"><?php echo get_post_meta($post->ID, 'fw_label_four', true);?></span></a>
<span class="arrow"></span>
</li>
<?php } ?>
</ul>
</nav>
</div>