Archived topic
How can i create a fixed Header and top Menu in the Generate Press Theme
83 replies · Started by Marco Aliberti on September 18, 2014
Hi Simon,
Your site looks great!
Are you wanting a space to always be present below the header, even when scrolling down?
If so, I don't think that's do-able. Right now, your header is fixed to the top, and all of the below content will move behind it - regardless of spacing.
While it may be possible, it would involve some funky HTML/CSS hacking, and probably isn't worth it.
Let me know if that makes any sense :)
Hi Tom
So, so sorry not to have thanked you for your reply. I've only just seen it and never got an email notification (that I just assumed - wrongly obviously - I would get), or at least I don't remember seeing one.
Thanks anyway for coming back to me, I appreciate it and what you say makes sense. Thanks also for the nice comment about my site. I appreciate that too!!
Simon
Hi Simon,
No worries! :)
That's great, however, how can I get my 'back to top' anchor to work?
If I ID the first line of the content it sits behind the fixed header, which technically accurate, putting the content at the top of the page.
I tried sticking the id in the before header hook but again, still hides the top of the content behind the top of the heading.
For Simon's header content separator request, could you not cheat and add a border/padding or something under the menu that is the same size and colour as the original separation? Surely that is straight forward code?
Hi!
I'm using GP Hooks and plugin Simple Custom CSS
Gould you check my website? It's not working.
http://www.vipdeposits.ru
I add <div class="custom-fixed-header"> to the Before Header
add </div> in After Header
add to Simple Custom CSS
.custom-fixed-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
.container {
padding-top: 120px;
}
works OK in Chrome, not in Internet Explorer
and one more quastion :)
How to fix only menu not a Header?
BWT i checked these in Safari - not working too
Hi there,
This thread should help: http://generatepress.com/forums/topic/keep-menus-visable-with-scroll/#post-54453
It should work in all browsers except for old versions of IE.
Hi Tom,
First of all I'm very satisfied with the GP theme it's very easy to customize for the different needs. I usually also find solution to my problems in the forum.
I managed to make the header fix based on the description above using simple custom CSS. My only problem is that it looks a bit weird on smartphone size displays. Is there a way to set the header fixed only for certain resolutions or so?
Thank You!
regards,
Szilu
Absolutely, placing the CSS inside the below will make sure it's only read on larger screens - mobile or small browsers will ignore the CSS:
@media screen and (min-width: 769px) {
/* CSS in here is ignored on mobile */
}Thank You! IT works as it should.
regards,
Szilu
Glad I could help :)
Tom,
One more thing regarding header setup. I figured, that when I set top:0; The admin bar covers the top of the header. Is there a way to trigger a different class for logged on user only? I tried to add .logged-in .custom-fixed-header{...} but it didn't work.
Actually, WordPress adds a class to the <body> element when the admin bar is present, so you can do this:
.admin-bar .custom-fixed-header {...}
Hope this helps :)
Simon -
If I understand you correctly, I add a border-bottom to the header to give it that look on my mobile menus. I believe theonetruevlad was making the same suggestion.
