- This topic has 13 replies, 5 voices, and was last updated 3 years, 7 months ago by
Leo.
-
AuthorPosts
-
April 13, 2017 at 7:23 am #305418
Simon
Hi there
I’m looking to make a header similar to the one on this page
https://www.cloudways.com/en/features.php
So my main header is transparent and then I have a second sticky header that shows after you scroll down a bit.
GeneratePress 1.3.46GP Premium 1.2.96April 13, 2017 at 8:39 am #305466Leo
StaffCustomer SupportHi Simon,
These couple articles should help:
https://docs.generatepress.com/article/merging-the-page-header-site-header/
https://docs.generatepress.com/article/sticky-navigation/Let me know if this is what you are after.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 14, 2017 at 11:38 am #305993Simon
Hi Leo
Yes I have managed to merge the header with the page header. So now the header is on top of a background image that also is behind the content area like the link I shared with you which I’m trying to recreate. Here it is again for reference.
https://www.cloudways.com/en/features.php
So now I also have the navigation is sticky but how do I also add the website logo to the sticky navigation? Basically I want the entire header to be sticky, not just the navigation.
April 14, 2017 at 1:50 pm #306024Tom
Lead DeveloperLead DeveloperHave you added a navigation logo?: https://docs.generatepress.com/article/navigation-logo/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 15, 2017 at 12:47 am #306160Simon
Hey Tom
Right, I didn’t see ‘navigation logo’ option, thank you.
The last two things I’m trying to achieve to make this sticky header perfect is…
1) to make the header full width. My layout isn’t boxed so the boxed menu looks bad. Trying to figure out the CSS for this. Will let you know if I figure it out soon.
2) less important but would be great, is to show this sticky menu only when the user decides to scroll up. I’m hoping to find some JS that will help me accomplish this. Again will let you know if I figure this out.
April 15, 2017 at 7:04 am #306245Simon
1) the full width header CSS was easy to figure out
#sticky-navigation {
max-width:100%!important;
}2) the hiding the #sticky-navigation and showing it only on scroll up is more difficult. I could the code myself (there are plenty of examples on stackoverflow etc) but changing existing code is always a lot harder. Any help would be appreciated.
April 15, 2017 at 9:11 am #306302Tom
Lead DeveloperLead DeveloperThat’s something I’m working on for a future update – it’s actually quite complicated as you need to use JS to detect when the user is scrolling up/down.
I have it mostly built already, but there’s a few bugs I need to fix before releasing it.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 17, 2017 at 12:59 am #306727Simon
Hi Tom
Yes I saw that you need to use JS to detect when the user is scrolling up and you don’t want it to detect if the user has scrolled up just one pixel as that can be quite taxing on the system.
I’m glad you’re working on this. It seems with a very simple layout it’s relatively easy to do. But with a more complex layout that I haven’t created personally and don’t have all the source files too it’s a little harder π
I look forward to the day you release this feature.
Thank you for your help and time and wish you all the best.
April 17, 2017 at 8:56 am #306858Tom
Lead DeveloperLead DeveloperNo problem! I’ll hopefully have it all working perfectly soon π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 2, 2017 at 8:19 am #327693Megan
Hi!
I am just wondering if there has been this update added to the theme? I purchased the GP premium and am utilizing it with eliminator pro. I am trying to create a header and then sticky header as example https://www.invisionapp.com/. I am pretty new at coding and working in WordPress, so I apologize in advance if these questions are super basic.
I have accomplished the transparent header, and then the sticky header which is with a black background. Also from this thread, I have made it the entire screen.
QUESTIONS:
1) Does the premium theme have the ability to have the very top bar as in the example on https://www.invisionapp.com/ that states “work for a large company”– and a button in that top bar.
2) Can I change the background of the sticky header so that it isn’t black?
3) How can I style the nav links and add a button in the links as in the example? How can I make this stay for the sticky header? I can’t seem to find any documentation on how to style that section through this website.
Thank you so much in advance. Any help that you can provide me would be amazing. I really appreciate it.
June 2, 2017 at 9:18 am #327727Tom
Lead DeveloperLead DeveloperHi there,
1. The theme doesn’t have this by default, but it could be built. There’s also a plugin that does something very similar: https://en-ca.wordpress.org/plugins/wordpress-notification-bar/
2. The sticky navigation will take on your primary navigation colors (Customize > Colors > Primary Navigation). Do you need it to be different?
3. You can add a button to the menu like this: https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607
If you need more info, feel free to start a new topic and link to what you have so far π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 1, 2017 at 4:17 pm #358335B
Hi,
I’m trying to create a header and sticky navigation similar to this site: goo.gl/21LNmE.
In particular, the logo appears only in the navigation bar and is larger than the height of the nav bar itself (with a drop shadow to make it appear like the logo is hovering above the page). Please advise whether / how I can do this with GP.
I’ve followed the instructions above, which has got me most of the way there. To get the logo to the required size, I’ve set the Menu Item Height to the max (150px) for desktop and smaller for mobile. However, ideally I’d like to make the following changes:
1. in desktop view, to have the logo larger / higher than than the height of the navigation bar and with a drop shadow (as in the above site).
2. I’d also like to make the logo larger in mobile view, but if I do so, this makes the height of the menu items too large when I click on the drop down menu. Is there a way to specify the size / height of the logo & menu item height separately?Many thanks!
August 1, 2017 at 4:29 pm #358340B
P.S. I’d also like to have one of the menu items appear like a button. I’ve included the CSS you gave in a previous post:
https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607… but this doesn’t really appear as a button given that I’ve set the Menu Item Height to the max. Please advise how to amend the CSS so the border of the button hugs the text more closely (vs filling the whole height of the menu item).
Many thanks! Really appreciate your support.
August 1, 2017 at 6:25 pm #358372Leo
StaffCustomer SupportHi there,
Can you open a new topic for your questions and provide link to your site if possible? Thanks very much π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.