[tarmadillo]

you can hide this top one with this:

.blog .page-header {
    display: none;
}

and the bottom one with

.blog .big-leader {
    display: none;
}

However, the best way to fix it would be to go into the theme files and add a conditional statement for one of them.

---

https://armadillowebdesign.com

[tarmadillo]

try adding this to custom css or in style.css at the bottom:

.flex-direction-nav li {
    margin-bottom: 0px;
    margin-top: 0px;
}

---

https://armadillowebdesign.com

[tarmadillo]

It's hard to say without a working link. This was the solution to a similar problem:

.archive-description.posts-page-description {
    display: none;
}

but that gets rid of the box and "Blog". If that doesn't work you can try Genesis Title Toggle by Bill Erickson.

If you still want it to say "Blog" you will need to use the browser inspect tool to find the right element and remove the background color.

---

https://armadillowebdesign.com

[tarmadillo]

on style-front.css I think you can wrap .js .fadeup-effect with a media query like this:

@media only screen and (min-width: 1024px) {
    .js .fadeup-effect {
        opacity: 0;
        overflow: hidden;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
}

---

https://armadillowebdesign.com

[tarmadillo]

You'd do it if you don't want the client to be changing anything at all. Hardcode it into a template file.

EWWWWWWW. My first WordPress client had their previous developer pull this. ALL their page content was hard coded into the theme files and written in PHP echos and span classes. It was worse than the plugin lock you get when using page builders. Changing the theme resulted in a completely blank website, no content. I had to resort to copy and paste out of the browser.

---

https://armadillowebdesign.com

[tarmadillo]

looks like they gave the wrong selector

.archive-description.posts-page-description {
    display: none;
}

---

https://armadillowebdesign.com

[tarmadillo]

your other post magically appeared at the top of the forum just now. I think something wonky is going on. a bunch of posts from yesterday popped up at the top of the forum.

anyway I tried to answer you here https://www.studiopress.community/topic/sticky-header-overlapping-existing-header/

---

https://armadillowebdesign.com

[tarmadillo]

I'm guessing you fixed it. Scrolling with the links seems to work for me.

Chrome Version 61.0.3163.100 (Official Build) (64-bit)

---

https://armadillowebdesign.com

[tarmadillo]

I think you are missing some {}'s after if( windowTop >= mainMenuBottom )

im not sure if you are trying to do this:

jQuery(function($){

    var $mainMenu = $('nav.nav-primary'),
        $stickyMenu = $('.agct_sticky');

    $(window).on('scroll', function() {
        var windowTop = $(this).scrollTop();  //get top of window
        var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
        
        if( windowTop >= mainMenuBottom ) {
            if ( $(window).width() > 768) { //hide on size less than 768
                $stickyMenu.slideDown();  //show our sticky menu
            } else {
                $stickyMenu.slideUp();  //hide our sticky menu 
            }
        }
    });
}); 

or this:

jQuery(function($){

    var $mainMenu = $('nav.nav-primary'),
        $stickyMenu = $('.agct_sticky');

    $(window).on('scroll', function() {
        var windowTop = $(this).scrollTop();  //get top of window
        var mainMenuBottom = $mainMenu.offset().top + $mainMenu.height();  //bottom of main menu
        
        if( windowTop >= mainMenuBottom ) {
            if ( $(window).width() > 768) { //hide on size less than 768
                $stickyMenu.slideDown();  //show our sticky menu
            } 
        } else {
            $stickyMenu.slideUp();  //hide our sticky menu 
        }
    });
}); 

I think you want the second one

---

https://armadillowebdesign.com

[tarmadillo]

question 1
here is one way it can be done:

//* Register social icon header widget area
genesis_register_sidebar( array(
	'id'          => 'social',
	'name'        => __( 'Social Icons', 'theme-name' ),
	'description' => __( 'This is the header right section.', 'theme-name' ),
) );

//* Hook social icon widget area before site navigation
add_action( 'genesis_header', 'ta_social_header', 11 );
function ta_social_header() {
	genesis_widget_area( 'social', array(
		'before' => '<div class="social-icons widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );
}

what it does is create a new widget area where you can add your social icons widget and hooks it before the site nav.

you will have to do a bit of css to get it to fit right

.social-icons {
    width: 50%;
    float: right;
    text-align: right;
}

that will get you started.

question 2

add_action( 'genesis_before_footer', 'ta_remove_footer_widgets', 4 );
function ta_remove_footer_widgets() {
    if ( ! is_front_page() ) {
        remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas');
    }
}

that will remove footer widgets on all pages but front page.

---

https://armadillowebdesign.com

[tarmadillo]

I'm at a loss. I don't think I'm seeing what you are. I'm using an s8 on mobile and the text is not over the mobile menu but there is a black on black font problem where the text overlaps the person. The heading is centered and the text in #optional_fullpage_content is hidden.

on chrome I do see the changes after I cleared my cache. The p font seems smaller and I do see the changes you made in html and css.

the h3 text does overlap the menu but only between 1200px and 1024px not mobile.

---

https://armadillowebdesign.com

[tarmadillo]

I need to stop jumping to conclusions lol. I did this and it worked for me.

function featured_post_image() {
    global $post;
    $day = 20170801;
    
    if ( intval(get_the_date('Ymd', $post->ID )) >= $day ) {
        the_post_thumbnail('large');
    } else {
        the_post_thumbnail('thumbnail');
    }
}

you may have to do more stuff to make it clickable but I don't know

---

https://armadillowebdesign.com

[tarmadillo]

When I echo $post->post_date on my site, I get the year, month, day, hour, min, seconds.

try

get_the_date('Y-m-d', $post->ID )

edit: now that i think about it it, the original should still be greater than the string you gave, I'll keep looking.

---

https://armadillowebdesign.com

[tarmadillo]

I'm guessing you mean that you do not want it to zoom out on mobile. You can try removing background-size: cover from line 118 of front-page.css

or you can add:

.front-page-2 {
    background-size: unset;
}

all you will see is the center characters on mobile but they will be much easier to recognize.

---

https://armadillowebdesign.com

[tarmadillo]

It seems to happen when you reach 500px wide.

try adding:

.site-container {
    overflow-x: hidden;
}

---

https://armadillowebdesign.com

[tarmadillo]

Does your site have multiple authors? Because what I think may be happening is that you have author archives disabled in Yoast. If you only have one author, I wrote this and it should work:

remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
add_action( 'genesis_entry_header', 'custom_post_info', 12);
function custom_post_info() {
     ?>
    <div class="entry-meta">
        <?php echo get_the_time( 'F j, Y', get_the_ID() ); ?> By <a class="entry-author" href="https://valuesplanning.com/blog/"><?php echo the_author_meta( 'display_name' );?></a>
    <span class="entry-comments-link">
        <a href="<?php comments_link(); ?>"><?php comments_number( '0', '1', '%' ); ?> Comments</a> 
    </span>
    </div>
    <?php
}

DO THIS ON AN OFFLINE SITE FIRST

I don't wanna be responsible if it doesn't work. I definitely recommend double checking my code on your own since I'm only a beginner and this was good practice.

Add that to functions.php

What it does is replace the post info and sends the author link to your blog. I assumed that your post info was under genesis_entry_header you may be using a different hook. The output on my test site seems to be the same as what your site has just a different link for the author.

---

https://armadillowebdesign.com

[tarmadillo]

if you haven't deleted the cache on your phone that's the problem there.

as for what you are seeing in chrome's responsive simulator, I assume it's that the front page 1 section is smashed to one side.

The reason is that you are using inline css that prevents the section from being responsive since inline css takes top priority.

instead of this:

<div><h3 style="padding-top:5%;margin-left:65%;margin-right:5%;text-align:left;color:#000;">Wake up your Inner Genius &<br>Get More Tools for Your Therapy Practice</h3></div>

<div class="optional_fullpage_content" style="margin-left:65%;margin-right:5%;text-align:left;"><p style="color:#000;"> I'm Annie Brook- the founder of the Colorado School of Somatic Studies.   
We work with therapists and individuals to deepen their understanding of how embodiment can improve and affect the quality of their lives and their clients' lives.	</p>	

<div class="optional_fullpage_content"><p style="color:#000;">I know from 40 years of working as a psychotherapist and teacher, that blending psychology with developmental neuroscience, sensory-motor integration, and play therapies helps people discover and repair the true root of their issues.
</p>
 </div> 	</div>   </div>

try this:

<div class="optional_fullpage_content">
    <h3>Wake up your Inner Genius &<br>Get More Tools for Your Therapy Practice</h3>

    <p> I'm Annie Brook- the founder of the Colorado School of Somatic Studies. We work with therapists and individuals to deepen their understanding of how embodiment can improve and affect the quality of their lives and their clients' lives.	</p>	
    
    <p>I know from 40 years of working as a psychotherapist and teacher, that blending psychology with developmental neuroscience, sensory-motor integration, and play therapies helps people discover and repair the true root of their issues.</p>
</div>

then in your style.css file add this:

.optional_fullpage_content {
        padding-top: 5%;
        margin-left: 65%;
        margin-right: 5%;
        text-align: left;
        color: #000;
    }

and then inside of @media only screen and (max-width: 1023px) in your style.css

.optional_fullpage_content {
    margin-right: 0px;
    margin-left: 0px;
    color: #fff;
}

other than that it looks fine to me.

---

https://armadillowebdesign.com

[tarmadillo]

I checked the scripts you were running using the browser inspector to see if you had a plugin since I never see separate mobile sites with wordpress. You had something called device-px-jetpack.js which sounded about right so I looked it up.

You are using span tags in your html so if you try to change it in the css it wont work since inline css takes priority.

instead of doing this:

<p style="text-align: center;"><span style="font-family: vidaloka; font-size: 120pt;"><span style="color: #9e6c00;"><span style="padding: 10px; background-color: #ffffff; line-height: 1;">Follow </span></span></span></p>

try doing something like this:

<h2>Follow</h2>
<h2>Your</h2>
<h2>Body</h2>

and then target them together in your css:

.front-page-1 h2 {
    text-align: center;
    font-family: 'vidaloka';
    font-size: 120pt;
    color: #9e6c00;
    padding: 10px;
    background-color: #fff;
    line-height: 1;
}

Then it looks like the font breaks around 550px wide so I would go to the section that says @media only screen and (max-width: 600px)

and you can add:

.front-page-1 h2 {
    font-size: 90pt;
}

or whatever font-size works.

the benefit is that you can just change the style in one location and and it will affect all three of those h2 elements instead of having to change each span

---

https://armadillowebdesign.com

[tarmadillo]

it's working on my end. did you clear your browser cache?

---

https://armadillowebdesign.com

[tarmadillo]

To get rid of the space at the top change .site-header from top: 5; to top: 0;

as for your mobile issues it looks like you enabled Jetpack's mobile site option.

To access the Mobile theme options:

Visit Jetpack -> Settings -> Writing tab and scroll down to the Theme Enhancements section in your Dashboard.
Find the “Enable the Jetpack Mobile theme” option and click the dropdown arrow.
Select your desired options, then click Save Settings.

---

https://armadillowebdesign.com

[Author]

Posts