Archived topic
Navigation on top of a full page image
3 replies · Started by mathattack on June 16, 2022
Hi!
I'm currently learning how to build websites from scratch using generatepress and generateblocks.
I'm really enjoying it but there is a lot to take on.
So with this in mind after trying to find an answer to my problem and getting slightly overwhelmed I thought I
would ask the forum directly so as to gain an insight into what I need to do.
My current issue is around navigation bars.
I am using a full width container image as a background on my homepage.
I want that to take up the whole page and place navigation over the top like this example : https://ashtangayogaschool.co.uk/
Currently I can see no way of not working with a nav bar at the top of the page, which is basically a solid line of colour.
Is the answer somehow in making a header and using some css to style it and then somehow link it to my primary menu?
Many thanks
Matthew
Hi there,
1. lets first deal with the Merged transparent header.
Create a new Header Element in Appearance > Elements.
You only require the options on the Site header tab - see here:
https://docs.generatepress.com/article/transparent-header-and-navigation/
Set the Display Rules > Location to the place(s) where you want it applied.
This will merge the Header/Navigation with whatever is at the top of your page.
2. now - what are we merging with?
You can either:
a) create a Full Width Page that will include the Hero Section with your full width image.
b) just create a Full Width Hero.
2a. A Full Width Page
i. First set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
Aside from making the page container 100% wide it removes the Themes padding and spacing.
ii. Remove any Elements you don't require from the page:
https://docs.generatepress.com/article/disable-elements-overview/
This will provide you with a clean canvas to work with.
iii. Now construct your page using the GenerateBlocks Container Block, You can add one for each section of the page.
Make sure you give the Container Block some padding eg. 40px left and right ( to replace the theme padding ) and whatever you need top and bottom.
2b. A Full width Page Hero
For this you can use a Block Element - Page Hero:
https://docs.generatepress.com/article/block-element-page-hero/
The benefit of these is you can create them dynamically, ie. use the Featured Image as the full width image background, and display the Title over the top of it. Which is a real time saver if you want a hero for each of your Posts :)
Let us know how you get on.
Thanks loads David,
I'll let you know how I get on.
One of things I was reading about was merging headers and navigation so glad I was in the right ball park!
So now I'll work out how I want to present my full width image based on the pointers you have laid out for me.
Appreciate the time and detailed response.
Bests
Matthew
You're welcome
