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

[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

[Tom]

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

[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

[Tom]

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!

[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

[Tom]

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

[Marco Aliberti]

Hi,

that works find 🙂 many tanks for your help….

Regards
Marco

[Tom]

Glad I could help 🙂

[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

[Tom]

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

Let me know 🙂

[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

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

[Tom]

Perfect – great job! 🙂

[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

[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

[Author]

Posts