Terence

I found what I wanted here in the end ~ http://wpsites.net/web-design/how-to-create-a-custom-landing-page-template-for-genesis/

Thanks Scooby but I know how to use Google. What I don’t know is how to make a landing page which is full width.

https://appfinite.com/topic/blog-content-in-the-image-area/#post-6951

The clue is in the title… 8^)

@BossLady ~ I just looked at the website with my iPhone and I think I now see what you mean. Almost half the slider image, in fact half of the screen was obscured by the header.

But try as I may, I am still not understanding how to correct this.

@BossLady ~ with nothing more clever than rearranging the menu items a little the header should now appear to you to be no more than 60px high? Yes?

@BossLady ~ thank you so much for trying to help me with this.

I tried what you suggested but I couldn’t see that it made any obvious difference.

I don’t doubt what you are saying is correct, but I am wondering if the problem you are seeing is not the one I am trying to fix.

You see the header 100px deep because you are not logged in and this changes “Log In” to “Log Out” and adds “Register” to the menu, which cause it to wrap inside the header. I think that’s why for you it the menu covers the slider. Also the logo has slipped out of position since adding this sticky header and is no longer on top of the home anchor.

Either way, first I have to fix that problem then I can come back to the media queries.

Any ideas on fixing the logo position?

Hmm, very strange. Are you sure its my site doing it Eric? I just looked at it ~ not logged in, with cache and cookies cleared ~ with Firefox’s code inspector, and I had no problem at all.

I have no idea what might be preventing you from seeing the underlying CSS. As far as I am aware, there isn’t anything running with anything remotely like that capability. The only thing I can think it could be is CloudFlare have maybe updated their firewall capability and, whether I like it or not, there’s some code obfuscation going on?

I think your guess is a good one but I have to admit I am struggling with how to maintain the header at 100% AND define a width. Could you give me an example of how that is done?

@touchofsummer ~ you were absolutely right and its fixed now.

All it required was to change two fixed dimension “header-width: ###px” statements to “header-width: 100%” in the media query section, and the job’s done.

Awesome! Thank you so much.

I always wanted to be an expurd, and now I are one… 8^)

@Jason ~ no, but close. Actually its from Brad Dalton. I saw it here [ http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/ ] and thought it looked like a really simple solution. Which it was, since he left out the whole media queries bit, which is unusual for Brad as his stuff is usually pretty spot-on.

Fortunately, he’s take pity on me and he’s taking a look, so I should have an answer pretty soon now.

Apparently Wes has gone awol, so I asked Brad Dalton, the guy who coded the original version of this method of creating a sticky menu, and what he told me was this…

It needs responsive design.

You will need to customize the responsive design using the CSS media queries as an guide in your child themes style.css file.

Hope you understand that responsive design varies depending on the individuals preferences and the design of the theme you’re using.

It’s not the same for every theme.

So now, arguably, I am wiser, but I still don’t know what to do to resolve this issue.

With this additional input, can someone (Eric?) steer me in the right direction?

I did add !important to the margin code in line 722 and it did fix it for my content.

Perfect… thanks Eric.

Maybe Wes will take a moment and have a look.. do you think?

@scooby @onlinesimple ~ thanks for coming back to me.

I published the test page I was working on at http://qloudpress.com/test/ so you can see what’s happening.

I’ve added !important as you suggested Allegra, but its not working.

I’m struggling here guys… throw me a crumb!

Thanks Eric, I tried your suggestion but adding that override makes no difference.

I also moved all the code to the header location around #1872, but nothing changed.

I then tried NickTheGreek’s plugin “Genesis Responsive Header” ~ which I used to have to use with 1.2, but don’t seem to need with 1.3 ~ because it normally allows you to set the header background color. But this time, with HTML5 and Genesis 2.0 it made no difference at all.

I then tried background-color: #293f5e !important; in various locations but for the moment I seem to be stumped as it remains stubbornly transparent.

This is a real shame because I particularly liked this method since, to my eyes at least, its very elegant and requires only minimal CSS additions.

Something within HTML5 seems to be controlling the header in a way I don’t understand.

Yet.

You can’t see epik-darkblue links on a black background. But that’s the standard 1.3 now has.

I guess I was just looking for it to be the same as it was in 1.2. No problem. I can live with that.

Actually, it seems to me that all the link and hover colors are not the same any more and some make no sense at all.

For example, the current Custom Body Class (epik-darkblue) is being used as the link color, with no hover color, on a black background for the creds in the footer.

This makes no sense at all, of course. How do I put the contrasts back in?

OK, thanks Eric, that defines the problem but not the solution.

So Google is my friend, and I have just learned that REM is the fallback with Sass or LESS, is relative to the font-size of the parent element on which it is defined and that this means, if one of the parents in the DOM-tree changes its font-size, the font-size of the child element changes too. Also that in contrast the REM unit is relative to the root element of the page (this means the html element), and thus it is possible to define a font-size once on the root and make all other sizes depending on this size.

So then I realized, I have to learn how to convert one into the other in order to deal with this situation, so I found the converter here ~ http://foliovision.com/2013/03/responsive-design-calculator ~ and worked out/confirmed that 40px is actually 2.85714286rem, and then I really started to get confused.

But in the end, I went with the following, and it seems to work quite nicely…

.header-image .site-header .widget-area {
	padding: 10px 0;
	padding: 0.72rem 0;
}

Thanks Eric, my education continues… 8^)

Hi Eric.

Its 02:45 in the morning here and I am sitting here trying to get the site back to where it was before I updated. I think I’m going to write this and then hit the sack as I have to be up early in the morning.

So much for Brian’s “Don’t be afraid to update to Genesis 2.0”. To be fair though, Genesis may well have been part of the problem but it didn’t become apparent until I updated Epik to 1.3.

Yes I understand that Wes rewrote it although I am not really sure why/if that was entirely necessary. Well, whether it was or it wasn’t, we are where we are. No good crying about it.

I take your point about not mixing the issues together so that others might find the solution to their problems a bit easier. I will put each in a separate thread so that we can tick them off as we go.

I think some/most of my original issues with ‘wonkiness’ were more to do with not being able to clear my cache properly than problems within the original PHP/CSS. Apparently the version of Chrome I was using had a problem, so I have now re-installed it.

Open-Sans is running generally but the way it has been used, and not used, in places, which is the first problem I saw. Being trained as a typographer I am sensitive to type styles, line spacing, font weight and color being changed and there are a number of those that have crept in, either deliberately, or accidentally in the rewrite; so I will start a new series of threads and work my way through the ones I can see already.

Thanks for being there and the offer of your help. I really do appreciate it.

Terence.

I tried Eric’s converter the other day and ran out of time and patience, when it didn’t go right for me. Not his fault ~ mine.

To avoid update problems I use two plugins and totally avoid the hassle no matter how many ‘improvements’ I make ~ Improved Simpler CSS, a custom CSS and LESS editor which provides an easy way to modify the css globally on your site, and you are able to edit the css from the front end, plus Code Snippets which is a very easy, clean and simple way to add code snippets to your site. No need to edit to your theme’s functions.php file ever again!

I got the website restarted but not the footer creds to center.