Adding Opt-in to Small Bar Above Logo Area? - Support | Kriesi.at

Viewing 25 posts - 1 through 25 (of 25 total)

Author

Posts
June 19, 2018 at 2:51 am #974580

Moondreamer21
Participant

I would like to add a centered AWeber Opt-in to the Small Bar above the Logo area. How can I do this?

June 19, 2018 at 3:58 am #974610
Ismael
Moderator
Hey Moondreamer21,

Thank you for using Enfold.

You have to modify the includes > helper-main-menu.php file or use the “avia_meta_header” hook to render the opt-in code.
```
add_action('avia_meta_header', function() {
// opt in code here
});
```
Let us know if you need further help with it.

Best regards,
Ismael
June 19, 2018 at 7:05 pm #974868

Moondreamer21
Participant

I can edit the helper-main-menu.php file.

Can you be more specific about exactly where to place the code you shared above? I tried adding it to the .php file with my opt-in code added, but doing so broke the site (it came up as a blank page).

Thanks.

June 19, 2018 at 10:02 pm #975000

Basilis
Inactive Moderator

Hi,

You do need to add that code at your functions.php file!

Best regards,
Basilis

June 19, 2018 at 10:29 pm #975020

Moondreamer21
Participant

I tried adding it to the functions.php file but nothing changed. I’ll post the code I added in the private section. Should I post it somewhere specific in the functions.php file?

June 19, 2018 at 10:50 pm #975030

Moondreamer21
Participant

To update you, I refreshed my page again and realized that code I shared above in the functions.php file brought the whole site down. Please advise?

June 20, 2018 at 5:45 am #975087
Ismael
Moderator
Hi,

Thanks for the update.

There’s a syntax error on the previous code. Please replace it with this one.
```
add_action('avia_meta_header', function() {
	?>
<div class="AW-Form-1200341147"></div>
<script type="text/javascript">(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//forms.aweber.com/form/47/1200341147.js";
		fjs.parentNode.insertBefore(js, fjs);
		}(document, "script", "aweber-wjs-gi0utpt4d"));
	</script>
	<?php
});
```
You may need to add a few css code to adjust the style of the form. For that, use this css code.
```
.AW-Form-1200341147 {
 /* style here */
}
```
Best regards,
Ismael
June 20, 2018 at 9:51 pm #975500

Moondreamer21
Participant

Thanks. I added your updated code to my functions.php file but there are no changes – the opt-in doesn’t appear in the small bar above the logo area. Please advise what my next step would be to troubleshoot?

June 21, 2018 at 3:09 am #975612
Ismael
Moderator
Hi,

The same code works on my end. Please make sure that the top bar is enabled. Place this additional filter in the functions.php file.
```
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
function avf_header_setting_filter_mod($header) {
	$header['header_topbar'] = true;
	return $header;
}
```
Best regards,
Ismael
June 21, 2018 at 2:14 pm #975794

Moondreamer21
Participant

Hello, I am still not seeing the opt-in form come up in the small top bar. I added the form to a code block lower in the page and it shows up OK, but when I add your code above to the functions.php file, it doesn’t show in the small top bar (which is enabled – I have social media icons showing in it).

I’ll post my site url info. in the private section if you could take a closer look? Thanks.

June 22, 2018 at 6:38 am #976101

Ismael
Moderator

Hi,

Thanks for the update.

The Header Secondary Menu in the Enfold > Header menu has to be enabled before using the “avia_meta_header” hook. We created a fake menu, added a custom link and then set it as the secondary menu. The form should display now but it may require a few style adjustments.

Best regards,
Ismael

June 22, 2018 at 11:38 pm #976509

Moondreamer21
Participant

Good to know, thanks so much!

June 23, 2018 at 1:25 pm #976942

Victoria
Inactive Moderator

Hi Moondreamer21,

Glad you got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria

June 28, 2018 at 6:39 pm #979001
Moondreamer21
Participant
I found a new AWeber horizontal opt-in form generator… however I need the heading to be to the left of the input fields (not on top) and I need the ‘Count Me In!’ submit button to be wider so that the text is all on one line. I’ll include the new form code I have put in the functions.php file.
Can anyone please offer the styling adjustments needed to get the look I want?
- This reply was modified 6 years, 3 months ago by Moondreamer21.
June 28, 2018 at 9:11 pm #979064

Moondreamer21
Participant

I see that the optin code I have now looks totally different on Internet Explorer and Mobile. Ugh. :( So that’s an issue too. Look forward to a response, thanks.

June 29, 2018 at 1:22 am #979153

Moondreamer21
Participant

Please disregard the code I shared above and see the latest version of functions.php.

I made progress getting everything on one line, but I can’t seem to figure out the settings to get the inputs aligned with the submit button and get them centered vertically in the top bar.

I do need to make sure the styling of the opt-in looks right cross-browser.

I decided to just not display the form on mobile, only a link to an opt-in page – but now that’s not appearing correctly on mobile?

Also, it appears that the logo (text) image may have gotten bumped down due to opt-in in the small top bar?

June 30, 2018 at 5:06 am #979531

Ismael
Moderator

Hi,

Thanks for the update. I can’t access the site though. Did you remove the account posted above?

Best regards,
Ismael

June 30, 2018 at 5:09 am #979532

Ismael
Moderator

Hi,

Thanks for the update. I can’t access the site though. Did you remove the account posted above?

Best regards,
Ismael

June 30, 2018 at 5:29 pm #979604

Moondreamer21
Participant

No sir, it’s coming up fine. Link is the same, I’ll re-share it below.

I’m also interested in centering the text and opt-in so I don’t have to use a big margin or padding on the left of it, and as I mentioned the spacing below it is pushing down the content in the logo area.

I would also like to make the font in the field and submit button Open Sans – have not had luck when trying to change that.

So to summarize what I’m wanting to achieve:
* Entire heading and opt-in fields to be aligned and centered horizontally and vertically in the small top bar.
*Only the heading text (a link) visible on mobile, not the opt-in form – I’d like it centered and for the social media icons to appear on the right on mobile also.
*For the opt-in code to be styled in a way that it doesn’t push down the content in the logo area.
*For all text in the opt-in code to be font style Open Sans.

Please see the latest opt-in form code in functions.php – I look forward to your help/reply!

July 3, 2018 at 1:01 am #980335

Moondreamer21
Participant

Just bumping this up?

July 3, 2018 at 4:03 am #980367
Ismael
Moderator
Hi,

I’m sorry for the late response. We’ve added these css codes on the Quick CSS field to align the opt-in to the left of the header meta container.
```
@media only screen and (min-width: 768px) {
#header_meta h6 a, #header_meta h6 {
    margin: 0 !important;
    font-family: 'Open Sans';
}

#header #formHTML {
    position: absolute;
    left: 200px;
    top: -13px;
}

.awbr-grid .awbr-row {
    margin-left: 0;
}
}
```
It covers the social media icons when center aligned.

Best regards,
Ismael
July 3, 2018 at 10:50 pm #980794

Moondreamer21
Participant

Thank you, I’m getting closer to having it perfect!
I’d like to increase the size of the ‘Receive Free Winning Tips’ text on desktop, but this isn’t working:

#header_meta h6 a, #header_meta h6{
/*size and spacing for small header bar text*/
font-size: 16px!important;
padding-right:15px!important;
}

I’d also like to add a little bit of space on the right side of the text. I don’t want that text to be Open Sans, but would like the text in the actual form to be. Appreciate the help!

July 5, 2018 at 11:06 am #981516
Ismael
Moderator
Hi,

The inline styling overrides your custom css code. Please use this one.
```
#header h6 a, #header h6 {
    margin: 0 !important;
    font-size: 18px !important;
}
```
You may need to push the form farther to the right.

Best regards,
Ismael
July 5, 2018 at 8:43 pm #981732

Moondreamer21
Participant

Thanks I think I have it all figured out. Appreciate the help.

July 6, 2018 at 7:25 am #981876

Ismael
Moderator

Hi,

Great! Glad we could help!

Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Ismael
Author

Posts

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Adding Opt-in to Small Bar Above Logo Area?’ is closed to new replies.