[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

This topic contains 83 replies, has 16 voices, and was last updated by  Leo 1 year, 5 months ago.

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

    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

    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

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

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