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

[Tom]

You need to create some space when sticking the header.

body {
      margin-top: 90px;
}

That should do it.

Nice site! 🙂

[Diane]

I am using the add-ons (thanks for that, they are amazing).

I also want my header to be fixed to the top. but instead the code you gave me for the entire header. I only want the navigation (placed under the header) to be fixed.

On another website http://dianezoet.nl/accesoires/pages/about I used javascript to do this, adding/changing css to the style of the navigation.

and put up a code like this.

first show what the header is to calculate (=logo) by putting up <header> and </header> tags and then add javascript to the footer.

Is there a way to do this with generapress since it’s a very populair way of using websites. (fixed navigations).

Thanks.

[Tom]

Hi Diane,

Have you checked out our Menu Plus add-on? It allows you to stick the navigation: http://www.generatepress.com/downloads/generate-menu-plus/

[Diane]

I am sorry while i was browsing for more answers i already found the answer.. sorry.

i bought the add on package not very long ago. does this update mean i have to pay seperate for this add on?

[Tom]

No worries!

If you purchased GP Premium, you just need to update to the latest version.

If you purchased the Super Package, you’ll need to purchase the add-on separately, or you can upgrade to GP Premium.

Let me know 🙂

[Diane]

generatepress says: GP Premium 1.2.64

[Diane]

In my apperance > generatepress it says menu plus is not activated (on the right with the images) but the menu plus activation option is not showing with all the rest where you can activate the add ons.

How do i active new add ons??

and yes i have GP premium

you say: If you purchased GP Premium, you just need to update to the latest version.

How do i do that? cause the theme is updated to the latest version

//edit I am so stupid i didn’t know i could download it from my account from this site. I’m so sorry

[Tom]

Do you have your email activated?: https://generatepress.com/knowledgebase/install-activate-addons/#activate

If so, GP Premium should have an update available if you go to “Dashboard > Updates”.

If not, you can update manually:

1. Download a fresh copy of GP Premium: https://generatepress.com/account
2. Delete the current copy of GP Premium you have activated
3. Upload and activate the fresh copy

[Diane]

It’s GREAT Thank you Tom, you are doing such an amazing job!! I LOVE IT!

[Tom]

Glad you like it! 🙂

[Antti]

I tried to fix my header as you suggested in Reply #31579.
Well. It is sticky now among the main navigation.

But the content clips under the header and navi now ?
How to fix this :S ?

[Tom]

You need to add some space when making the header sticky: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/page/4/#post-108973

That 90px needs to be changed to the height of the sticky area.

[nipe]

Hi Tom,

First of all I love GP and how helpful you are in the forums!

I have my top menu floating to the right of the header and used your code (#31579) to make them both stick to the top.

.custom-fixed-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2000;
}

.container {
      padding-top: 60px;
}

And of course the admin bar covered my top menu. By accident I found that setting top: 1; instead of top: 0; in your code solved that problem. I’m not sure why and I’m not sure if it’s a proper way of doing it or if it may cause any problems? Is your way (#83502) better?

.admin-bar .custom-fixed-header {...}

If so, can you please explain how/where to use that information because I don’t get it.

And btw it would be great if you could make this an add-on, perhaps called Header Plus. 🙂

[Tom]

Hi there,

If your method works on modern browsers then I’m sure it’s fine.

Using the .admin-bar class simply means you can take the height of the admin bar and move your header down perfectly to the pixel.

I’m thinking of a good way to implement this into the Menu Plus add-on 🙂

[nipe]

Thank you for your prompt reply.
It seems to work with latest Chrome, Firefox and IE so I guess I’ll keep using my way then unless I find any problems with it.

[Author]

Posts