Archived topic
Off-canvas navigation Questions
8 replies · Started by Thomas on March 24, 2021
Hello all, thank you once again for your wonderful support & theme and plugins. I am trying to achieve a effect utilizing a vertical always on screen off-canvas navigation, but I have a few questions. I am not sure also if this is even the best way to achieve this effect, or if I should instead opt for a grid based?
Basically, I want a large hero image on the front with the navigation situated to the left hand side in a bar. Attached is a image of the desired effect. I guess the trouble comes in that the menu navigation would NOT be full height, instead a 100vh height. Would something like this be better suited to using it as a grid? Is there any harsh SEO effect for doing it that way?
Second, I am trying to put widgets in my off-canvas nav, but for some reason Wordpress isn't paying attention to widget order and it is forcing the navigation on top. Is that on purpose?
Thank you so much for your help!
Oh I forgot; the mobile version will have a traditional navigation so this is only a desktop related concern.
Hi there,
thats a fun one :)
Would the image to the right of the header be the Featured Image ? As it will be tricky setting up the vertical header and an image thats in the site content.
Thanks David :)
It can be the featured image if needed, but I was thinking of using Gutenbergs "Cover" picture in that area instead. I didn't even consider the featured image.
Luckily it's just the front page with this navigation; the other pages have a pretty *knock on wood* normal one!
Which you know, I didn't even consider making it a full fledged nav with a huge image...that would probably be the easiest way
Heres an idea.
We unhook the off canvas and add it inside its own wrapper with another container for displaying the featured image - this PHP Snippet will do that:
remove_action( 'wp_footer', 'generate_slideout_navigation', 0 );
add_action( 'generate_before_header', function() {
if ( is_front_page() ) :
echo '<div class="header-wrap">';
generate_slideout_navigation();
echo '<div class="featured-container" style="background-image: url('. get_the_post_thumbnail_url(get_the_ID(),'medium_large') . ')"></div>';
echo '</div>';
endif;
}, 2);Then some CSS to layout the containers:
@media(min-width: 769px) {
#generate-slideout-menu {
left: 0;
position: unset;
}
.header-wrap {
display: flex;
}
.featured-container {
flex: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
}Genious!!! That worked with only a small few bugs that I can disable, if you'd agree that would be the best "solution". The masthead still shows for me, so I would just display: none it?
Thank you so so much. What a cool way to handle it :)
Awesome :) You could use a Layout Element to disable the Site Header for the front page.
Excellent thanks David, have a great day!
Glad to be of help!
