Header "Register Now" Section

Hey, I'd like to change the section at the top here:

http://jackalopemedia.com/extendfertility

The part that says "register now". However, it's not a widget... the "header" widget handles the image loading in, when I've deleted. So how do I change that top area that appears on every page?

Also, I'd like that to be responsive. I've attached what I'd like that top area to show, and I'd like it to be responsive and work on a mobile phone as well as a browser.

Thanks for the help!

toppy 2.jpg

Hi,

You can enable/disable this register button from Template Options -> Features tab. If you want to change it you have to edit Fest/layouts/header.php file (inside gk-header-top div).

For now logo and the button are responsive, add your own content and then I'll try to help you with that.

Hey Piotr, thanks for the tip. I checked out Header.php, and all I see is this:

Code: Select all

<?php

// This file was added especially for the wp-signup.php and wp-activate.php files :-)

gk_load('header');
gk_load('before');

// EOF

So where should I be changing content? Also, if the theme updates, will these changes be erased? Thanks!

Looks like the button on theme features only turns on/off the button, not the entire section. So would it even be possible to have this section only show up on the homepage?

Edit: Got it.

I set the #gk-page-top menu to position: fixed; to get a "sticky" menu. However, when I did that, all menu items blurred into one. What's the best way to get a sticky menu effect? Thanks!

Ok Piotr, a handful of questions for you. Really appreciate your time on these answers!

If you take a look at the site

http://jackalopemedia.com/extendfertility/

You'll see that the sponsors has some weird padding. First, it looks like there's some padding on the left, which makes the sponsors area off-centered from the image header and the footer. What's the best way to make these all line up perfect?

Also, we'd like to get rid of the padding on the top and bottom of sponsors, so it fits close to the blue outline at the bottom of the photo. There can be a bit of space here, but not much.

I got the top part in. When it's responsive, I think all that needs to happen is the text goes on top, then the button, then the image last. If you could recommend the best way to go about this, I'd be grateful.

Here's the HTML:

Code: Select all

<div class="above-the-fold">
               <span>
               <img alt="Extend Fertility has helped 1000s of Women" src="http://jackalopemedia.com/extendfertility/wp-content/themes/Fest/images/girl_left.jpg">
               </span>
               </a>   
               <span>
               <div class="headline">
                  <h1>Should you <font color="#00bce3">freeze your eggs?</font></h1>
                  <h3><strong>“I would definitely do it again, only sooner and with younger eggs.”</strong>
                  <br />
                    - Lady InGreen, <a href="#"><i><font style="font-size: 12px;">learn more about our clients’ experiences.</font></i></a>
                  </h3>
                  <a class="btn" href="#"><i class="icon-phone"></i>Talk to an expert</a>
               </div>
               </span>
            </div>

CSS:

Code: Select all

.above-the-fold {
   display: table;
}   

.above-the-fold img {
   vertical-align: middle;
   display: table-cell;
   padding-right: 50px;
}

.above-the-fold > span {
   vertical-align: middle;
   display: table-cell;
}

.headline {
   margin-bottom: 150px;
}

.headline h1 {
   font-size: 36px;
   padding-bottom: 12px;
}

.headline h3 {
   font-size: 16px;
}

.headline h4 {
   font-size: 10px;
}

.headline h3 a {
   color: #00bce3;
   text-decoration: underline;
}

.headline h3 a:hover {
   color: #00bce3;
   text-decoration: none;
}


Lastly, when the screen size is shrunk to mobile, a black outline appears around the menu icon in the upper left corner. Why is this?

Thanks!

Hi,

I mean Fest/layouts/header.php, not Fest/header.php file. If you update your theme your change will be lost, so it's important to use css/override.css file to write your own css code, and if you want to add more modifications you should consider using Child theme, check these articles:

http://www.gavick.com/magazine/gavernwp ... hemes.html
http://www.gavick.com/documentation/wor ... -gk-theme/
http://www.gavick.com/documentation/wor ... ld-themes/

In regards to your issues, add this code to css/override.css file (first enable this option from Template Options -> Advanced tab):

Code: Select all

#gk-top1 .box {
   padding: 0;
   margin-bottom: 0;
}

.gk-sponsors > div > a:first-child {
   margin-left: 0;
}

.gk-sponsors > div > a:last-child {
   margin-right: 0;
}

#gk-header-top {

margin-bottom: -20px;
}

#main-menu-mobile {
  border: 0;
}


and this code to css/tablet.css file:

Code: Select all

.above-the-fold {

display: block;
}

Hey Piotr, thanks for all your help.

I tried adding that code to tablet.css, and it still displays side-by-side. I'd like it to display one on top of the other, with the image first ideally.

Thanks!

Add this code to css/tablet.css file:

Code: Select all

.above-the-fold {
display: block!important;
}

Awesome, works perfect, thanks!

If you take a look here http://jackalopemedia.com/extendfertili ... rces/#faqs you'll see we're using the shortcodes for those boxes. However, they don't actually open, and I've pulled the shortcode specifically from the Gavick shortcode selector, so the format should be right.

Did you edit any files from theme core? please check especially Fest/gavern/helpers/helpers.shortcodes.php file (should be the same as in the newest version of the theme)

Yes, I've edited the header php file, but nothing else. Just replaced the old shortcodes.php with a new fresh version, still no opening.

Could you send me a PM with backend access to your website?