[Resolved] Sticky Header, side bar and section

Home Forums Support [Resolved] Sticky Header, side bar and section

Home Forums Support Sticky Header, side bar and section

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #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.

    #348901
    Tom
    Lead Developer
    Lead Developer

    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.

    #348934
    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.

    #349221
    Tom
    Lead Developer
    Lead Developer

    I don’t think the URL came through?

    #349447
    Gillian

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

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

    #349479
    Tom
    Lead Developer
    Lead Developer

    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.

    #349766
    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.

    #349824
    Tom
    Lead Developer
    Lead Developer

    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?

    #349835
    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

    #350021
    Tom
    Lead Developer
    Lead Developer

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

    Then I can help you place it where you want 🙂

    #350047
    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

    #350074
    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.

    #350244
    Tom
    Lead Developer
    Lead Developer

    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

    #350284
    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.

    #350444
    Tom
    Lead Developer
    Lead Developer

    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>
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.