Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] How can i create a fixed Header and top Menu in the Generate Press Theme

Home Forums Support How can i create a fixed Header and top Menu in the Generate Press Theme

Viewing 15 posts - 1 through 15 (of 84 total)
  • Author
    Posts
  • #31426
    Marco Aliberti

    Hi,

    i need a fixed Header an top menu at my page so that the contend can scroll under the Header and Menu.
    Is there a possibility to do that ?

    Can you please help me.
    Sorry for my bad english im not a native Speaker.

    I tried to edit style.css like this but without any success.

    .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    }
    body {
    padding-top: 120px;
    }

    Thx

    Marco

    #31470
    Tom
    Lead Developer
    Lead Developer

    Hi Marco,

    The code you added above looks pretty good – not sure why it wouldn’t be working.

    Can you try this:

    .site-header {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 2000;
    }
    
    .container {
          padding-top: 120px;
    }
    #31480
    Marco Aliberti

    Hi,

    is not working 🙁 in wich File i have to add this code.
    i added it via Design >> Editor >> Generatepress >> style.css in the Dashboard.
    but in my Theme Folder i have 2 style.css

    ./wp-content/themes/generatepress/style.css
    ./wp-content/themes/generatepress/inc/css/style.css

    wich File is the right one. Is it possible that changes via Dashboard not working ?

    Thx for your help

    #31491
    Tom
    Lead Developer
    Lead Developer

    I wouldn’t add any CSS to those files, as your changes will be lost when you update the theme.

    I would use a plugin like this: https://wordpress.org/plugins/simple-css/

    If it’s still not working when you add it in there, can you link me to your site so I can see the issue?

    Thanks!

    #31545
    Marco Aliberti

    Hi,

    ok with simple-custom-css it works. The Header is fixed but my primary menu under the Header is not fixed but a little bit destroyed right now, is it possible to fix the menu also to prevent tht the menu scrolls under the fixed header.

    This is my Site, please dont laugh 🙂 is my first try i had just startet with wordpress couple of days ago … i still learning how to use it.

    http://www.tischtennis-tv-malsch.de/das-spiel/

    Thx for your Help

    #31579
    Tom
    Lead Developer
    Lead Developer

    Are you using the GP Hooks addon? If so, there’s an easier way to do this.

    First, you seem to have the navigation set to show up above the header – I would choose below the header, as that seems to be the look you’re going for.

    Next, using GP Hooks, I would do this:

    In the “Before Header” area, add this:

    <div class="custom-fixed-header">

    In the “After Header” area, add this:

    </div>

    Now remove the CSS we added, and add this instead:

    .custom-fixed-header {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 2000;
    }
    
    .custom-fixed-header + * {
          padding-top: 120px;
    }
    #31833
    Marco Aliberti

    Hi,

    that works find 🙂 many tanks for your help….

    Regards
    Marco

    #31834
    Tom
    Lead Developer
    Lead Developer
    #35702
    Marco Aliberti

    Hi Tom,

    is it also possible to fix the footer with hooks and this code…

    in before footer
    <div class="custom-fixed-header">

    in after footer
    </div>

    CSS

    .custom-fixed-footer {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 2000;
    }
    
    body {
    	margin-bottom: 80px;
    }

    Can you please have a short look at this ? Do you think that will be work to fixing the footer ?

    Thx in advance

    regards
    Marco

    #35730
    Tom
    Lead Developer
    Lead Developer

    That should work, but you need to change top: 0 to bottom: 0.

    Let me know 🙂

    #35736
    Marco Aliberti

    Hi Tom,
    have a look, the footer is now fixed but the header no more 🙁 what happens …

    http://www.tischtennis-tv-malsch.de/vereinsmeisterschaft-herren-2014/

    Thats the code that i added …

    before footer
    <div class="custom-fixed-footer">

    after footer content
    </div>

    .custom-fixed-footer {
          position: fixed;
          bottom: 0;
          width: 100%;
          z-index: 2000;
    }
    
    body {
    	margin-bottom: 80px;
    }

    regards
    Marco

    #35737
    Marco Aliberti

    Hi Tom,

    i found it 🙂 i added this now it works nice….
    Big Thanks for your help… greetings from Germany

    .custom-fixed-footer {
          position: fixed;
          bottom: 0;
          width: 100%;
          z-index: 2000;
    }
    
    body {
    	margin-bottom: 80px;
    }
    .custom-fixed-header {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 2000;
    }
    
    .container {
          padding-top: 120px;
    }
    #35775
    Tom
    Lead Developer
    Lead Developer
    #36038
    Simon Reed

    Hi Tom

    Sorry to hijack this thread.

    First, can I say a huge thank you to you for the Generate Press theme and your support through this forum. I am new to WordPress (and clueless about CSS) and was finding it very frustrating, but am now very happy with my new site.

    I have followed your advice above and have got a nice static header. Is there now a way to retain the background padding underneath the header so that when you scroll you retain ‘separation’ between the header and the content blocks below?

    My site is here:

    Many thanks again

    Simon

    #36039
    Simon Reed

    Sorry – I don’t seem to have included the link to my site. Told you I was clueless about CSS.

    It is here: http://www.musicalpicturesblog.com

    Thanks

Viewing 15 posts - 1 through 15 (of 84 total)
  • You must be logged in to reply to this topic.