Essential grid above masthead

Support
#1

Im adding essential grid above the masthead. I used :

add_action(‘x_before_site_begin’, ‘add_ess_grid’);

function add_ess_grid() {
echo do_shortcode(’[ess_grid alias=“test”]’);
}

Which worked except that now my logo bar, nav bar is hidden.
All I want is to have my logo and nav links to be in a bar between the two grids. A grid below and grid above.
Here is my temp url: http://50f.931.myftpupload.com

Would greatly appreciate any help at all! Im so close to achieving what I need!
Thank you
Rena

Navbar below build-in CLASSIC SLIDER
#2

Hi Rena,

You can try this code instead.


add_action('x_before_masthead_begin', 'add_ess_grid');

function add_ess_grid() {
	echo "<div style='clear:both;'>".do_shortcode('[ess_grid alias="test"]')."</div>";
}

Hope that helps.

#3

Thank you Paul for helping! Unfortunately it didn’t work :frowning: I read a thread : https://theme.co/apex/forums/topic/place-the-essential-grid-direct-above-or-below-masthead/
That says place it in the wp-header…php file but I can’t find it. Does this file no longer exist? It was an old thread but what the person did worked.

Thanks,
Rena

#4

Hi there,

That code will not work if the legacy template is in use. Please change it to this,

add_action('x_after_view_global__slider-below', 'add_ess_grid');

function add_ess_grid() {
	echo "<div style='clear:both;'>".do_shortcode('[ess_grid alias="test"]')."</div>";
}

Thanks!

#5

Thanks, unfortunately that didnt work either. With the first code I used the grid will show up but the logo disapears and the menu is on the right and stacked. With this one nothing happens. Just the logo bar goes back up to the top and looks nice but no grid above it.

Im using intergrity… not sure if that helps

#6

Hi there,

In that case, could you try adding the first code again? Maybe it just need a separate javascript to re-trigger the rendering. The grid uses absolute positioning which could overlap to other elements. Hence, re-rendering it will trigger recalculation too that may prevent the overlaps.

Thanks!

#7

Ok I put it back up. You will see now the nav menu is lined vertically on the right. I added a picure of what I’m trying to achieve with essential grid above the logo bar.
Thanks!
Rena

#8

Hello There,

Thanks updating in! I would recommend that you remove all your previous codes first. We will start fresh. I have seen your screenshot and to achieve this, you can start by having this:


add_action('x_after_view_global__slider-above', 'add_essgrid_above');
function add_essgrid_above() {
  //echo do_shortcode('[ess_grid alias="test"]');
  echo '<p>Essential Grid placeholder above the navbar</p>'
}


add_action('x_after_view_global__slider-below', 'add_essgrid_below');
function add_essgrid_below() {
  //echo do_shortcode('[ess_grid alias="test"]');
  echo '<p>Essential Grid placeholder below the navbar</p>'
}

In this code, I have used a placeholders and not to display the grid first. This is to make sure that you will see that this code is working. Now as soon as you display the grid by echoing the essgrid shortcode, there might be some issues which will cover the navbar or what so ever. If that happens, you can fix it by editing your grid and make sure that it is set to display as auto and not position as fixed.

Please let us know how it goes.

#9

Thank you so much for your time. Unfortunately, I’m getting a parse error and my website is just completely white. Could you tell me how to adjust this code?

#10

Hi again,

Please replace the previous code with the following code:

add_action('x_after_view_global__slider-above', 'add_essgrid_above');
function add_essgrid_above() {
  //echo do_shortcode('[ess_grid alias="test"]');
  echo '<p>Essential Grid placeholder above the navbar</p>';
}


add_action('x_after_view_global__slider-below', 'add_essgrid_below');
function add_essgrid_below() {
  //echo do_shortcode('[ess_grid alias="test"]');
  echo '<p>Essential Grid placeholder below the navbar</p>';
}

Hope this helps!

#11

YES!!! Thank you so much for all your help!

#12

Glad we could help.

Cheers!

#13

Ok Im sorry, I do need a bit more help Nabeel. Im not sure how to replace the temporary pieces to display the shortcake. I tried :

add_action(‘x_after_view_global__slider-above’, ‘add_essgrid_above’);
function add_essgrid_above() {
//echo do_shortcode(’[ess_grid alias=“test”]’);
echo .do_shortcode(’[ess_grid alias=“grid-1”]’)’;
}

add_action(‘x_after_view_global__slider-below’, ‘add_essgrid_below’);
function add_essgrid_below() {
//echo do_shortcode(’[ess_grid alias=“test”]’);
echo .do_shortcode(’[ess_grid alias=“grid-1”]’)’;
}

#14

Hi again,

There is an error in your code, please replace your code with this:

add_action('x_after_view_global__slider-above', 'add_essgrid_above');
function add_essgrid_above() {
  echo do_shortcode('[ess_grid alias="grid-1"]');
}


add_action('x_after_view_global__slider-below', 'add_essgrid_below');
function add_essgrid_below() {
  echo do_shortcode('[ess_grid alias="grid-1"]');
}

Let us know how this goes!

#15

One last thing! promise :wink: How can I have this hidden on all pages expect the homepage? I just wanted this to be the home page. And the regular plain navbar with logo and menu on all others.

Thank you so much for the help. It looks perfect.

#16

Hey there,

To display it on homepage only, just replace the previous code with this:

add_action('x_after_view_global__slider-above', 'add_essgrid_above');
function add_essgrid_above() {
	if ( is_front_page() ) {
		echo do_shortcode('[ess_grid alias="grid-1"]');
	}
}


add_action('x_after_view_global__slider-below', 'add_essgrid_below');
function add_essgrid_below() {
	if ( is_front_page() ) {
		echo do_shortcode('[ess_grid alias="grid-1"]');
	}
}

Hope this helps!

#17

Hello, last month you helped me with this and it worked out awesomely. I was just wondering if i wanted to add one more row of essential grid below the bottom one. What would I add? I have this:

add_action(‘x_after_view_global__slider-above’, ‘add_essgrid_above’);
function add_essgrid_above() {
if ( is_front_page() ) {
echo do_shortcode(’[ess_grid alias=“grid-1”]’);
}
}

add_action(‘x_after_view_global__slider-below’, ‘add_essgrid_below’);
function add_essgrid_below() {
if ( is_front_page() ) {
echo do_shortcode(’[ess_grid alias=“grid-2”]’);
}
}

I want to insert a 3rd below grid-2

Thank you as always for your awesome support!
Rena

#18

Hey Rena,

You can add the grid next to the last code just like this:

add_action('x_after_view_global__slider-above', 'add_essgrid_above');
function add_essgrid_above() {
	if ( is_front_page() ) {
		echo do_shortcode('[ess_grid alias="grid-1"]');
	}
}


add_action('x_after_view_global__slider-below', 'add_essgrid_below');
function add_essgrid_below() {
	if ( is_front_page() ) {
		echo do_shortcode('[ess_grid alias="grid-1"]');
	}
}

add_action('x_after_view_global__slider-below', 'add_essgrid_bottom');
function add_essgrid_bottom() {
	if ( is_front_page() ) {
		echo do_shortcode('[ess_grid alias="grid-3"]');
	}
}

Please take note of the function names which I have changed.

Hope this helps.

#19

Beautiful! Thank you thank you!!!

#20

You’re most welcome!