- This topic has 16 replies, 2 voices, and was last updated 3 years, 9 months ago by
Tom.
-
AuthorPosts
-
July 13, 2017 at 4:27 am #348707
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.48GP Premium 1.3.1July 13, 2017 at 9:37 am #348901Tom
Lead DeveloperLead DeveloperCan 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-developmentJuly 13, 2017 at 10:27 am #348934Gillian
Hi Tom
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.
July 14, 2017 at 12:16 am #349221Tom
Lead DeveloperLead DeveloperI 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-developmentJuly 14, 2017 at 9:56 am #349447Gillian
Sorry, thought I’d put it in as a link. Site is:
July 14, 2017 at 10:51 am #349479Tom
Lead DeveloperLead DeveloperNo 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-developmentJuly 15, 2017 at 4:45 am #349766Gillian
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.
July 15, 2017 at 9:50 am #349824Tom
Lead DeveloperLead DeveloperThat 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-developmentJuly 15, 2017 at 10:15 am #349835Gillian
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
July 16, 2017 at 12:39 am #350021Tom
Lead DeveloperLead DeveloperYou 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-developmentJuly 16, 2017 at 1:48 am #350047Gillian
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
July 16, 2017 at 3:47 am #350074Gillian
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.
July 16, 2017 at 11:03 am #350244Tom
Lead DeveloperLead DeveloperYour 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-developmentJuly 16, 2017 at 12:09 pm #350284Gillian
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.
July 16, 2017 at 11:16 pm #350444Tom
Lead DeveloperLead DeveloperYou’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 -
AuthorPosts
- You must be logged in to reply to this topic.