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

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;
}

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

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!

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

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;
}

Hi,

that works find :-) many tanks for your help....

Regards
Marco

Glad I could help :)

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

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

Let me know :)

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

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;
}

Perfect - great job! :)

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

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