Archived topic
Vertical Scroll Full Screen Section: How to position the menu/logo?
18 replies · Started by hichb on May 14, 2019
Hi there,
Thanks for your reply.
I'm having a hard time to position the logo on top with a vertical scroll effect.
If I use the canvas template the native menu on top is hidden and all looks fine. The section appears full height and the scroll effect works perfectly, but then how to position the logo/menu on top?
If the GP menu is enabled by default, there's a space on top when scrolling back to the top.
I want to have a fixed logo on top here (http://gsolution.co/).
If I add it using Elementor, I can add an image element as the logo and custom position but then it's no more responsive.
It requires a lot of work to just made it responsive.
How to resolve this?
Should I just use the default GP menu and make some adjustments to the section?
Thanks!
Hi there,
Not 100% sure if I understand.
If you want to use GP default header/menu with a fixed logo in the center, you should be able to:
- Upload a logo in Site Identity:
https://docs.generatepress.com/article/site-identity-overview/
- Use the navigation as a header option:
https://docs.generatepress.com/article/navigation-as-a-header/
- Set alignment to center:
https://docs.generatepress.com/article/navigation-layout/
- Activate sticky navigation and set the transition to none:
https://docs.generatepress.com/article/sticky-navigation/
That should get you pretty close.
Let me know :)
Hi Leo,
Thanks for your help and links. I was able to resolve the issue now.
I just need to make the logo sticky now.
There's no navigation menu.
The navigation bar containing the logo on top is transparent and merged with the content (hero) following this tutorial https://docs.generatepress.com/article/navigation-as-a-header/#basic
The settings are enabled for sticky navigation and logo but it doesn't appear.
Here's the link to the site:
http://gsolution.co/
I want the logo to be fixed when scrolling down and transparent.
Thanks for your help!
Try creating a new menu without any items in it and assign to primary menu so you can use this option:
https://docs.generatepress.com/article/navigation-as-a-header/
Let me know :)
Almost there!
Just need some little adjustments. Now the logo is much smaller and more on the right.
I need to adjust the size and move it slightly on the left.
Where should I go to control these settings?
Should I adjust the menu height?
Thanks!
Should I still be looking at this site?
https://gsolution.co/
Doesn't looks like you are using this method?
https://generatepress.com/forums/topic/vertical-scroll-full-screen-section-how-to-position-the-menu-logo/#post-899435
Let me know :)
Yes, it's correct. It's that site.
I'm using the method you suggested.
Like you checked the box that says Use Navigation as Header option?
That's that what your site is showing.
Any caching plugin or server cache?
I disabled the cache and here's the settings:
http://tinyurl.com/y5yac8y4
Is that correct?
The setting looks correct but on your site the default header is still there:
https://www.screencast.com/t/gmZCWdxD3gFM
Can you try clearing the cache before disabling it?
Hello Leo,
Can you check now, here's what it looks like:
http://tinyurl.com/y3jl9hs8
Thanks
Can you try setting the navigation widths both to full?
https://docs.generatepress.com/article/navigation-layout/
That should get us closer.
Both are in full now! Thanks. Now just the size of the logo or menu on top?
Hmm I'm still seeing contained for the inner:
https://www.screencast.com/t/71bwpXL8
Probably the same caching issue as before again.
You can increase the logo size by increasing the menu item height:
https://docs.generatepress.com/article/menu-item-height-width/
And add this CSS to move it down:
.inside-navigation {
margin-top: 30px;
}
By the way, the code also shows you are using GPP 1.8.0 which is not the latest (1.8.2)
Hum I see, I'm not seeing the cache issue here: http://tinyurl.com/y5kugvle
Cache is disabled but still enabled in the server side which I cannot control for the moment.