[Support request] Widget & Menu Order in Slide Out Navigation

[faust]

Hi,

There’s a couple of things I’m looking to do with the Slideout Navigation:

1. I’d like the X cross icon to replace the burger menu when it’s clicked on. Right now, the X cross icon is located to the right hand side of the slide out navigation.

2. When I assign the menu to the slideout navigation, I can edit it in colors (as you can see), but then all my widgets go below it? I don’t want this. I want my search bar to be first, then my menu, and after that – other widgets.

3. I’d like the transparency in the slideout navigation to not be full screen but only about a third of the way except for mobile phones.

4. I want to pad the left side of the slide out menu (text only)

So my slideout navigation would look something like this:

X <— this replaced the burger menu when slideout navigation comes out
[Search Bar]
[Menu]
[widget #1]
[Widget #2]

Thank you.

[Tom]

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;
}

[faust]

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.

[Tom]

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/

[faust]

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.

[David]

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?

[faust]

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.

[Tom]

Try adding this CSS:

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

[Author]

Posts