Widget & Menu Order in Slide Out Navigation

1. Right now you'll have to manually add the exit button into your slideout navigation like this:

add_action( 'generate_inside_slideout_navigation', function() {
    ?>
        <button class="slideout-exit custom-exit"></button>

        <?php the_widget( 'WP_Widget_Search' ); ?>
    <?php
} );

We also added a search widget in there.

Then add this CSS:

.slide-opened .slideout-exit:not(.custom-exit),
.slide-opened .slideout-toggle {
    display: none;
}

button.slideout-exit.custom-exit:before {
    font-family: GeneratePress;
}

button.slideout-exit.custom-exit {
    position: relative;
}

2. We added a search widget below the exit button in the function above.

3. Have you tried giving the slideout navigation a background color in "Customize > Colors > Slideout Navigation"?

4. Maybe something like this will help:

.slideout-navigation .slideout-menu {
    padding-left: 20px;
}

Hi Tom,

Thank you for the quick reply!

I've added the hook with the PHP and CSS code ( I didn't alter/added anything from the code you gave me ). It still doesn't seem to be working properly?

3. I changed the colors to transparency because I didn't want a solid color. And I rather on a desktop that the transparency doesn't go full screen if that's possible?

I'm also getting a white line where all my Customize and Dashboard button would be for wordpress.

Thanks.

If you're using a Hook Element (https://docs.generatepress.com/article/hooks-element-overview/), then you can add this as your hook content:

<button class="slideout-exit custom-exit"></button>
<?php the_widget( 'WP_Widget_Search' ); ?>

Then choose the generate_inside_slideout_navigation hook.

The CSS should be added using one of these methods: https://docs.generatepress.com/article/adding-css/

Hi Tom,

It works again!Though:

1. do you think you can help me align the cross to the burger menu? It's too big and it doesn't look like it's just being switched out.

2. Can I adjust the search to also be the same px away from the left hand side like the menu?

3. I've tried to extend the length of the to be 35% of the screen, and it isn't closing completely.

.main-navigation.offside {
	width: 35%;
}

4. When I close the slide, the animation doesn't look right.

Thanks.

Hi there,

2. Search field padding:

.widget .search-field {
    padding-left: 70px;
}

3. Navigation width

.offside--left.is-open {
    -webkit-transform: translate3d(35vw,0,0);
    -moz-transform: translate3d(35vw,0,0);
    -ms-transform: translate3d(35vw,0,0);
    -o-transform: translate3d(35vw,0,0);
    transform: translate3d(35vw,0,0);
}
.main-navigation.offside {
    width: 35vw;
}
.offside, .offside--left {
    left: -35vw;
}

4. What doesn't look right?

Hi David,

2. That just moves the 'search' grey text 70px, it doesn't move the widget. I changed it to and it worked:

.widget .search-form

3. That solved it, thanks!

4. You can see that when you close the menu, the search bar is higher than it is when it's opened.

Try adding this CSS:

button.slideout-exit.custom-exit {
    min-height: 55px;
}