- This topic has 16 replies, 2 voices, and was last updated 6 years, 8 months ago by Tom.
-
AuthorPosts
-
July 13, 2017 at 4:27 am #348707Gillian
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.
July 13, 2017 at 9:37 am #348901TomLead 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.
July 13, 2017 at 10:27 am #348934GillianHi 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 #349221TomLead DeveloperLead DeveloperI don’t think the URL came through?
July 14, 2017 at 9:56 am #349447GillianSorry, thought I’d put it in as a link. Site is:
July 14, 2017 at 10:51 am #349479TomLead 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.
July 15, 2017 at 4:45 am #349766GillianHi 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 #349824TomLead 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?
July 15, 2017 at 10:15 am #349835GillianI 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 #350021TomLead 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 🙂
July 16, 2017 at 1:48 am #350047GillianHello 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 #350074GillianI 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 #350244TomLead 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
July 16, 2017 at 12:09 pm #350284GillianI’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 #350444TomLead 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>
-
AuthorPosts
- You must be logged in to reply to this topic.