Sticky Header, side bar and section

[Gillian]

Hi

I’m using Elementor Pro with GeneratePress Premium

I have 3 elements on my page that I want to make sticky on a desktop – my Header, my main navigation (which is in the right side bar) and a section/row which sits just below the header.

I’ve used Sticky Menu (or Anything) plugin to make the header sticky but as far as I can see you can only use that for one element. So I’ve used myStickySidebar plugin to make the sidebar sticky.

I can make the section/row sticky by giving it a CSS ID and using the Sticky Menu (or Anything) plugin but then I’ve lost my sticky header, so I wondered if there was a way of making the header sticky from within GeneratePress.

I’ve tried a couple of plugins which say they make the header sticky so I could use the Sticky Menu (or anything) on the section/row but they don’t seem to work.

I would be grateful for any suggestions for how I can achieve the 3 sticky elements in the most efficient way.

Thank you.

GeneratePress 1.3.48

GP Premium 1.3.1

[Tom]

Can you link me to your site?

Making elements sticky can be difficult because of the admin bar, but I should be able to give you some CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gillian]

Hi Tom

The site is

The element I’m trying to get sticky is the row with the 3 different coloured button son it. It is effectively a menu but I didn’t use a menu as each ‘tab’ need sto be differently coloured. They are all custom links to take the user to another church’s website. The links aren’t working properly at the moment – can’t remember where I sent them(!) because all sites will have the same layout as the one I’m currently working on, so I want to get that one right and then export it to the other sites and adjust colours/content there.

If there’s a better way of achieving what I want to do with the links, please let me know. I’m very much a beginner with GeneratePress and Elementor.

Many thanks.

[Tom]

I don’t think the URL came through?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gillian]

Sorry, thought I’d put it in as a link. Site is:

http://Www.pulloxhillpcc.3churches.uk

[Tom]

No problem!

You could try something like this:

#home-page-menu {
    position: sticky;
    top: 130px;
}

130px being the height of your sticky header above it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gillian]

Hi Tom

That doesn’t seem to work – but I’ve come up with another solution which seems more efficient and that is to put the link buttons into the header which is already sticky.

I’ve already got an image widget in my header, so I added 3 more widgets to the header and put one button link in each. I want the image widget to stay on the right hand side of the header but the 3 button widgets to be in a line and underneath the site title and strap line.

I’ve managed to get the widgets into a line by using:

.header-widget .widget {
display: inline-block;
}

But I can’t work out how to get the button widgets to align left and leave the image widget aligned right.

[Tom]

That won’t really work using header widgets, especially as each button is a widget of its own.

Is there a way to put those buttons into a template which you can call with a shortcode?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gillian]

I think I can get them into a template using Elementor and get a short code. How do I then get the template into the header?

Thanks

[Tom]

You could put the shortcode into the After Header Content hook inside GP Hooks.

Then I can help you place it where you want 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gillian]

Hello Tom

I’ve got my link buttons into the header using the GP Hooks. I’ve managed to style them on the desktop view to get them where I want them using an unordered list displayed horizontally and playing about with the margins. Is that the best way to do it?

Thanks

[Gillian]

I also need to alter the mobile site header. I’ve enabled the mobile site header and put the same code as I put in the hook but without the margins on the unordered list styling but the shortcode buttons aren’t showing up. Do I have to do something different to get them to show in the mobile header?

Here is th code in my php file:

* Needed to create Mobile Header
 * CSS needed to deal with Mobile Header layout */
 
 add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
        St James Church, Pullxohill
         <div >
<style>
ul { list-style-type: none;
 /*     margin-top: -55px;
      margin-left: 1px;*/
     }
li { float:left;
     margin-right: 10px;}
</style>
<ul>
<li>[elementor-template id="507"] </li>
<li>[elementor-template id="509"]</li>
<li>[elementor-template id="511"]</li>
</ul>
</div>
    </div>
<?php }

and here is the css styling:

/* STYLING MOBILE HEADER - see also PHP File
-------------------------------------------- */
.mobile-header-content {
    background-color: #e6ffea;
	border: solid 2px #00991c;
	color: #00991c;
	text-align:center;
	font-weight:bold;

}

Thank you.

[Tom]

Your HTML should look like this:

<div class="mobile-header-content">
        St James Church, Pullxohill
<style>
ul { list-style-type: none;
 /*     margin-top: -55px;
      margin-left: 1px;*/
     }
li { float:left;
     margin-right: 10px;}
</style>
<ul>
<li>[elementor-template id="507"] </li>
<li>[elementor-template id="509"]</li>
<li>[elementor-template id="511"]</li>
</ul>
</div>

The stuff inside the

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gillian]

I’ve changed the html to the above but the link buttons still don’t display.

I added a bit of extra code just in case it was the shotcodes which were stopping the buttons displaying but nothing in an unordered list displayed. I tried adding a display inline to the UL but nothing happened until I made it important and then I got the items displaying in the header but the shortcodes just appeared as the text which had been typed between the li tags. Plus all my menu items were displayed even though the beefburger symbol was showing.

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-header-content">
        St James Church, Pullxohill
                
<style>
ul { list-style-type: none;}

li { float:left;
     margin-right: 10px;}
</style>
<ul>
<li>Benefice </li>
<li>Silsoe</li>
<li>Flitton</li>
</ul>
<ul>
<li>[elementor-template id="507"]</li>
<li>[elementor-template id="509"]</li>
<li>[elementor-template id="511"]</li>
</ul>
</div>

If I can just get the 3 elements to display in a line below the ‘St James Church, Pulloxhill’ line, I could hard code in the links and style them all.

[Tom]

You’ll need to add this CSS:

.mobile-header-content ul {
    display: block;
}

You’ll also need to replace your shortcodes with this:

<li><?php echo do_shortcode( '[elementor-template id="507"]' );?></li>
<li><?php echo do_shortcode( '[elementor-template id="509"]' );?></li>
<li><?php echo do_shortcode( '[elementor-template id="511"]' );?></li>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts